利用JQuery的$.ajax()可以很方便的调用的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
code：
using System.Web.Script.Services;
[WebMethod]public static string SayHello(){return "Hello Ajax!";}
注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
JQuery code：
$(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、带参数的方法调用
code：
using System.Web.Script.Services;
[WebMethod]public static string GetStr(string str, string str2){return str + str2;}
JQuery code：
$(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、返回数组方法的调用
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;}
JQuery code：
$(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("<li>" + this + "</li>");});alert(data.d);},error: function(err) {alert(err);}});//禁用按钮的提交return false;});});
4、返回Hashtable方法的调用
code：
using System.Web.Script.Services;
using System.Collections;
[WebMethod]public static Hashtable GetHash(string key, string value){Hashtable hs = new Hashtable();hs.Add("www", "yahooooooo");hs.Add(key, value);return hs;}
JQuery code：
$(function() {$("#btnOK").click(function() {$.ajax({type: "Post",url: "data.aspx/GetHash",//记得加双引号 T_Tdata: "{ 'key': 'haha', 'value': '哈哈！' }",contentType: "application/json; charset=utf-8",dataType: "json",success: function(data) {alert("key: haha ==> " + data.d["haha"] + "\n key: www ==> " + data.d["www"]);},error: function(err) {alert(err + "err");}});//禁用按钮的提交return false;});});
运行结果：
5、操作xml
XMLtest.xml:
<?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><?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 code:
$(function() {$("#btnOK").click(function() {$.ajax({url: "XMLtest.xml",dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了success: function(xml) {//清空list$("#list").html("");//查找xml元素 KVM 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机$(xml).find("data>item").each(function() {$("#list").append("<li>id:" + $(this).find("id").text() + "</li>");$("#list").append("<li>Name:" + $(this).find("name").text() + "</li>");})},error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数alert(status);}});//禁用按钮的提交return false;});});
