asp.net MVC3 + JQuery 的ajax简单使用

一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 
这里先记下来,以后使用时可以再拿着用。 

本应用中,本来是准备使用长链接的方式,在server端有错误消息产生时,能实时返回错误消息。可在使用长链接时,因为.net功底 
不够,以失败告终!所以采用了javascript中间隔查询的方法。 
页面代码如下: 

Java代码  asp.net MVC3 + JQuery 的ajax简单使用
  1. @{  
  2.     ViewBag.Title = "ErrorMonitor";  
  3. }  
  4. <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>  
  5. <script type="text/javascript" language="javascript">  
  6.   
  7.     $(function () {  
  8.   
  9.         setInterval(ajaxRequest, 1000);  
  10.     });  
  11.     function ajaxRequest() {  
  12.   
  13.         $.ajax(  
  14.         {  
  15.             url: ‘/TopDemo/Home/ErrorRefresh‘,      // 指定调用的URL,对应于Controller  
  16.             data: ‘{}‘,                             // 如果请求有参数,需要在这里指定  
  17.             type: "POST",                           // 请求类型  
  18.             contentType: "application/json;charset=utf-8",  
  19.             dataType: "json",  
  20.             success: function (data) {              // 请求成功后的回调  
  21.                 if (data == null || data.length == 0) {  
  22.                     return false;  
  23.                 } else {  
  24.                     writeMsg(data);  
  25.                 }  
  26.             },  
  27.             error: function (data) {                // 请求失败后的回调  
  28.                 alert(data.statusText);  
  29.             }  
  30.         }  
  31.     );  
  32.     }  
  33.   
  34.     function writeMsg(data) {  
  35.         var errorDiv = document.getElementById("errorDiv");  
  36.         for (var i = 0; i < data.length; i++) {  
  37.             var errorText = document.createTextNode(data[i].errMsg);  
  38.             var errorTextDiv = document.createElement("div");  
  39.             errorTextDiv.appendChild(errorText);  
  40.             if (errorDiv.hasChildNodes) {  
  41.                 errorDiv.insertBefore(errorTextDiv, errorDiv.firstChild);  
  42.             } else {  
  43.                 errorDiv.appendChild(errorTextDiv);  
  44.             }  
  45.         }  
  46.     }  
  47.   
  48. </script>  
  49. <h2>  
  50.     错误监控</h2>  
  51. <div id="errorDiv">  
  52. </div>  


Controller的代码也很简单,就是简单的把错误消息列表以json格式返回给View,如下: 

Java代码  asp.net MVC3 + JQuery 的ajax简单使用
    1. [HttpPost]  
    2. public JsonResult ErrorRefresh()  
    3. {  
    4.    int errMsgSize = errMsgService.Size();  
    5.    List<object> errors = new List<object>();  
    6.    if (errMsgSize > 0)  
    7.    {  
    8.     for (var i = 0; i < errMsgSize; i++)  
    9.        {  
    10.            ErrorMessageModel errMsg = errMsgService.Remove();  
    11.            if (errMsg != null)   
    12.            {  
    13.                errors.Add(new  
    14.                {  
    15.                    errMsg = "error:  " + errMsg.ErrorType + "," + errMsg.ErrorKey + "," + errMsg.ErrorTime + "," + errMsg.ErrorMsg  
    16.                });  
    17.           }  
    18.        }  
    19. }  
    20.    JsonResult result = this.Json(errors);  
    21.    return result;  
    22. }  

asp.net MVC3 + JQuery 的ajax简单使用,布布扣,bubuko.com

asp.net MVC3 + JQuery 的ajax简单使用

上一篇:jquery 文本框失去焦点显示提示信息&&单击置空文本框


下一篇:转:WebDriver(Selenium2) 判断页面是否刷新的方法