Ich habe während des gesamten Prozesses viele Wissenspunkte gelernt und etwas über die Verwendung von jQuery und Ajax in asp.NET gelernt. Zusammenfassend lässt sich sagen, dass die Prinzipien dieselben sind. Wenn Sie eines verstehen, können Sie darauf achten zu den anderen mit wenigen Unterschieden. , Flexible Verwendung:
1. Methodenaufruf mit Parametern
Der Beispielcode lautet wie folgt:
Front-End-jQuery-Code:
$ (function() {
Eine Methode, die ich kenne, ist Ajax, um den Hintergrund anzupassen.
1. Methodenaufruf mit Parametern
Der Beispielcode ist wie folgt folgt:
Front-End-jQuery-Code:
<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>
Dies ist die Ajax-Methode unter jquery, die die Hintergrundmethode aufruft.
Dazu sind mehrere Punkte zu beachten Methode:
Die Typmethode muss post sein und die Hintergrundmethode muss statisch sein. Die Methodendeklaration sollte mit dem Attribut [System.Web.Services.WebMethod()] und der Nummer hinzugefügt werden Die Anzahl der übergebenen Parameter sollte mit den Parametern der Methode übereinstimmen:
2. Beispielcode:<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>
Front-End-jQuery-Code
asp.net-Hintergrundmethode<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>
<span style="font-size:18px">[System.Web.Services.WebMethod()] public static string SayHello() { return "Hello Ajax!"; }</span>
<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>
<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>
<span style="font-size:18px">xnl文件示例: <?xml version="1.0" encoding="utf-8" ?> <data> <item> <id>1</id> <name>qwe</name> </item> <item> <id>2</id> <name>asd</name> </item> </data> Jquery代码:Jquery代码:</span>
<span style="font-size:18px">$(function() { $("#btnOK").click(function() { $.ajax({ url: "XMLtest.xml", dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了 success: function(xml) { //清空list $("#list").html(""); //查找xml元素 $(xml).find("data>item").each(function() { $("#list").append("id:" + $(this).find("id").text() +""); $("#list").append("Name:"+ $(this).find("name").text() + ""); }) }, error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 alert(status); } }); //禁用按钮的提交 return false; }); });</span>