整個過程當中學習到很多知識點,了解了jQuery、Ajax在asp.NET中的運用,加以總結,其實原理都是一樣的,理解了一種,其他的注意很少的區別就可以了、靈活運用:
1、有參數的方法呼叫
範例程式碼如下:
前台jQuery程式碼:
$(function() {
所知道的一種就是ajax混音器的方法。方法呼叫
範例程式碼如下:
前台jQuery程式碼:
<span style="font-size:18px">$(function() { var browers = browersEstimate(); var params = '{browersType:"' + browers + '"}'; $.ajax({ type: "POST", //提交方式 url: "Default.aspx/RecordData", //提交的页面/方法名 data: params, //参数(如果没有参数:null) dataType: "json", //类型 contentType: "application/json; charset=utf-8", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); }); });</span>
這個是jquery下Ajax方法呼叫後台方法。方法必須是靜態的,方法宣告要加上特性[System.Web.Services.WebMethod()],傳遞的參數數量也應該和方法的參數相同。無參數的方法呼叫
範例程式碼:
前台jQuery程式碼
<span style="font-size:18px"> [System.Web.Services.WebMethod()] public static void RecordData(string browersType) { if (BrowserControl.Counters == null) { BrowserControl.InitData(0); } if (browersType == "") { browersType = "Other"; } BrowserControl.AddOneByBrowserType(browersType); if (BrowserControl.WriteInDataBase()) { BrowserControl.OldTotalCount = BrowserControl.Counters.Count; } else { BrowserControl.OldTotalCount = 0; } }</span>
asp.net後台方法
<span style="font-size:18px">$(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "data.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });</span>
3、傳回陣列方法的呼叫
asp. .net 後台程式碼:
<span style="font-size:18px">[System.Web.Services.WebMethod()] public static string SayHello() { return "Hello Ajax!"; }</span>
4、操作xml
<span style="font-size:18px">$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetArray", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function() { //插入结果到li里面 $("#list").append("" + this + ""); }); alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });</span>
Jquery前台程式碼:
<span style="font-size:18px">[System.Web.Services.WebMethod()] public static List GetArray() { List li = new List(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; } </span>
總結
主要是我們要注意js程式碼裡面的方法名稱要與後台一致,再有就是後台的方法必須是靜態的,方法宣告要加上特性[System.Web.Services.WebMethod()],傳遞的參數個數也應該和方法的參數相同,注意這幾部分我們的調試就簡單多了,剩下的就是多實踐、加強原理的理解了。