基于asp.net JQuery Ajax使用方法[付完整函数]

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

返回Hashtable数据

返回数组

返回int,string等数据类型

(1) 首先引入jquery脚本语言

(2) 后台cs页面引用using System.Web.Script.Services;  

(3) 后台方法一定要静态方法，而且要有[WebMethod]的声明

(4) 如有参数必须与后台对应，包括类型

注意：以上4点必须满足

另外如果是.Net 2.0 框架 web.config配置文件中必须添加如下选项

 <httpModules>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </httpModules>

 

jQuery 拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

名称	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

1、无参数的方法调用

asp.net后台代码

1. using System.Web.Script.Services;       
2.       
3. [WebMethod]       
4. public static string SayHello()       
5. {       
6.      return "Hello Ajax!";       
7. }      

JQuery代码

1. $(function() {     
2.     //定义一个ID为btnOK元素的点击事件  
3.     $("#btnOK").click(function() {     
4.         $.ajax({     
5.             //要用post方式     
6.             type: "Post",     
7.             //方法所在页面和方法名     
8.             url: "data.aspx/SayHello",     
9.             contentType: "application/json; charset=utf-8",     
10.             dataType: "json",     
11.             success: function(data) {     
12.                 //返回的数据用data.d获取内容     
13.                 alert(data.d);     
14.             },     
15.             error: function(err) {     
16.                 alert(err);     
17.             }     
18.         });     
19.     
20.         //禁用按钮的提交     
21.         return false;     
22.     });     
23. });   

运行结果：

2、带参数的方法调用

asp.net代码

1. using System.Web.Script.Services;     
2.     
3. [WebMethod]     
4. public static string GetStr(string str, string str2)     
5. {     
6.     return str + str2;     
7. }    

JQuery代码

1. /// <reference path="jquery-1.4.2-vsdoc.js"/>     
2. $(function() {     
3.     $("#btnOK").click(function() {     
4.         $.ajax({     
5.             type: "Post",     
6.             url: "data.aspx/GetStr",     
7.             //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字     
8.             data: "{str:我是,str2:XXX}",     
9.             contentType: "application/json; charset=utf-8",     
10.             dataType: "json",     
11.             success: function(data) {     
12.                 //返回的数据用data.d获取内容     
13.                   alert(data.d);     
14.             },     
15.             error: function(err) {     
16.                 alert(err);     
17.             }     
18.         });     
19.     
20.         //禁用按钮的提交     
21.         return false;     
22.     });     
23. });    

运行结果：

3、返回数组方法的调用

Asp.net代码

1. using System.Web.Script.Services;     
2.     
3. [WebMethod]     
4. public static List<string> GetArray()     
5. {     
6.     List<string> li = new List<string>();     
7.     
8.     for (int i = 0; i < 10; i++)     
9.         li.Add(i + "");     
10.     
11.     return li;     
12. }    

JQuery代码

1. /// <reference path="jquery-1.4.2-vsdoc.js"/>     
2. $(function() {     
3.     $("#btnOK").click(function() {     
4.         $.ajax({     
5.             type: "Post",     
6.             url: "data.aspx/GetArray",     
7.             contentType: "application/json; charset=utf-8",     
8.             dataType: "json",     
9.             success: function(data) {     
10.                 //插入前先清空ul     
11.                 $("#list").html("");     
12.     
13.                 //递归获取数据     
14.                 $(data.d).each(function() {     
15.                     //插入结果到li里面     
16.                     $("#list").append("<li>" + this + "</li>");     
17.                 });     
18.     
19.                 alert(data.d);     
20.             },     
21.             error: function(err) {     
22.                 alert(err);     
23.             }     
24.         });     
25.     
26.         //禁用按钮的提交     
27.         return false;     
28.     });     
29. });    

4、返回Hashtable方法的调用

Asp.Net后台方法

1. using System.Web.Script.Services;     
2. using System.Collections;     
3.     
4. [WebMethod]     
5. public static Hashtable GetHash(string key,string value)     
6. {     
7.     Hashtable hs = new Hashtable();     
8.     
9.     hs.Add("www", "yahooooooo");     
10.     hs.Add(key, value);     
11.          
12.     return hs;     
13. }    

JQuery代码

1. /// <reference path="jquery-1.7.2-vsdoc.js"/>     
2. $(function() {     
3.     $("#btnOK").click(function() {     
4.         $.ajax({     
5.             type: "Post",     
6.             url: "data.aspx/GetHash",     
7.             //记得加双引号  T_T     
8.             data: "{ key: haha, value: 哈哈！ }",     
9.             contentType: "application/json; charset=utf-8",     
10.             dataType: "json",     
11.             success: function(data) {     
12.                 alert("key: haha ==> "+data.d["haha"]+"/n key: www ==> "+data.d["www"]);     
13.             },     
14.             error: function(err) {     
15.                 alert(err + "err");     
16.             }     
17.         });     
18.     
19.         //禁用按钮的提交     
20.         return false;     
21.     });     
22. });    

5、操作xml

XMLtest.xml文件

1. <?xml version="1.0" encoding="utf-8" ?>    
2. <data>    
3.   <item>    
4.     <id>1</id>    
5.     <name>qwe</name>    
6.   </item>    
7.   <item>    
8.     <id>2</id>    
9.     <name>asd</name>    
10.   </item>    
11. </data>   

保存.congif后缀可以避免被下载

jquery代码：

1. $(function() {     
2.     $("#btnOK").click(function() {     
3.         $.ajax({     
4.             url: "XMLtest.xml",     
5.             dataType: xml, //返回的类型为XML ，和前面的Json，不一样了     
6.             success: function(xml) {     
7.                 //清空list     
8.                 $("#list").html("");     
9.                 //查找xml元素     
10.                 $(xml).find("data>item").each(function() {     
11.                     $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");     
12.                     $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");     
13.                 })     
14.             },     
15.             error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数     
16.                 alert(status);     
17.             }     
18.         });     
19.     
20.         //禁用按钮的提交     
21.         return false;     
22.     });     
23. });    

但是不是所有东西都是美好的：我引入了1.7.2的jquery版本！改变了传送的类型.无论如何。在IE10.0以上 所有的jquery ajax均失效

包括extjs著名的框架！也都无法在IE10.0运行。

到底是谁出错了是jquery的版本，还是IE10.0的交互！

知道的朋友请告诉我吧！苦恼