本篇文章主要是對jquery.Ajax()方法調用Asp.Net後台的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
利用JQuery的$.ajax()可以很方便的調用asp.net的後台方法。 先來個簡單的實例熱熱身吧。 1、無參數的方法調用 asp.net code: 代碼如下: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } 注意:1.方法一定要靜態方法,而且要有[WebMethod]的聲明 JQuery code: 代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/> $(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; }); }); /// <reference path="jquery-1.4.2-vsdoc.js"/> $(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; }); }); 結果: 2、帶參數的方法調用 asp.net code: 代碼如下: using System.Web.Script.Services; [WebMethod] public static string GetStr(string str, string str2) { return str + str2; } using System.Web.Script.Services; [WebMethod] public static string GetStr(string str, string str2) { return str + str2; } JQuery code: 代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetStr", //方法傳參的寫法一定要對,str為形參的名字,str2為第二個形參的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的數據用data.d獲取內容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按鈕的提交 return false; }); }); /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetStr", //方法傳參的寫法一定要對,str為形參的名字,str2為第二個形參的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的數據用data.d獲取內容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按鈕的提交 return false; }); }); 運行結果: 下面進入高級應用羅 3、返回數組方法的調用 asp.net code: 代碼如下: using System.Web.Script.Services; [WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; } using System.Web.Script.Services; [WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; } JQuery code: 代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() {