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

 
   

一直都没有使用过JQuery，更没使用过JQuery的ajax支持带来的方便，今天试了一下，真是减少了很多工作量，使用方法也比较简单

这里先记下来，以后使用时可以再拿着用。

本应用中，本来是准备使用长链接的方式，在server端有错误消息产生时，能实时返回错误消息。可在使用长链接时，因为.net功底

不够，以失败告终！所以采用了javascript中间隔查询的方法。

页面代码如下：



@{ 
    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> 

@{
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，如下：

 


[HttpPost] 
public JsonResult ErrorRefresh() 

{ 
   int errMsgSize = errMsgService.Size(); 

   List<object> errors = new List<object>(); 

   if (errMsgSize > 0) 

   { 
    for (var i = 0; i < errMsgSize; i++) 

       { 
           ErrorMessageModel errMsg = errMsgService.Remove(); 
           if (errMsg != null)  

           { 
               errors.Add(new 

               { 
                   errMsg = "error:  " + errMsg.ErrorType +
"," + errMsg.ErrorKey + "," + errMsg.ErrorTime +
"," + errMsg.ErrorMsg 
               }); 
          } 
       } 
} 
   JsonResult result = this.Json(errors); 

   return result; 
}