asp.net MVC3 + JQuery 的ajax簡單使用

標籤：des   http   java   使用   os   art   

一直都沒有使用過JQuery，更沒使用過JQuery的ajax支援帶來的方便，今天試了一下，真是減少了很多工作量，使用方法也比較簡單 
這裡先記下來，以後使用時可以再拿著用。 

本應用中，本來是準備使用長連結的方式，在server端有錯誤訊息產生時，能即時返回錯誤訊息。可在使用長連結時，因為.net功底 
不夠，以失敗告終！所以採用了javascript中間隔查詢的方法。 
頁面代碼如下： 

Java代碼  

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代碼  

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