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

 

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

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

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> 

@{
    ViewBag.Title = "ErrorMonitor";
}
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    $(function () {

        setInterval(ajaxRequest, 1000);
    });
    function ajaxRequest() {

        $.ajax(
        {
            url: '/TopDemo/Home/ErrorRefresh',		// 指定调用的URL，对应于Controller
            data: '{}',								// 如果请求有参数，需要在这里指定
            type: "POST",							// 请求类型
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {				// 请求成功后的回调
                if (data == null || data.length == 0) {
                    return false;
                } else {
                    writeMsg(data);
                }
            },
            error: function (data) {				// 请求失败后的回调
                alert(data.statusText);
            }
        }
    );
    }

    function writeMsg(data) {
        var errorDiv = document.getElementById("errorDiv");
        for (var i = 0; i < data.length; i++) {
            var errorText = document.createTextNode(data[i].errMsg);
            var errorTextDiv = document.createElement("div");
            errorTextDiv.appendChild(errorText);
            if (errorDiv.hasChildNodes) {
                errorDiv.insertBefore(errorTextDiv, errorDiv.firstChild);
            } else {
                errorDiv.appendChild(errorTextDiv);
            }
        }
    }

</script>
<h2>
    错误监控</h2>
<div id="errorDiv">
</div>

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

 

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. }