利用JQuery直接调用asp.net后台方法
利用JQuery直接调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
后台:
后台代码
1 using System.Web.Script.Services; 2 3 [WebMethod] 4 public static string SayHello() 5 { 6 return "Hello Ajax!"; 7 }
前台:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 $(function() { 2 $("#btnOK").click(function() { 3 $.ajax({ 4 //要用post方式 5 type: "Post", 6 //方法所在页面和方法名 7 url: "data.aspx/SayHello", 8 contentType: "application/json; charset=utf-8", 9 dataType: "json", 10 success: function(data) { 11 //返回的数据用data.d获取内容 12 alert(data.d); 13 }, 14 error: function(err) { 15 alert(err); 16 } 17 }); 18 19 //禁用按钮的提交 20 return false; 21 }); 22 });
2.带参数的方法调用
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 using System.Web.Script.Services; 2 3 [WebMethod] 4 public static string GetStr(string str, string str2) 5 { 6 return str + str2; 7 } 8 9 10 本篇文章来源于 dotnet开源社区 原文链接:http://www.openaspx.com/article/201204/06/20120406090800.htm
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 $(function() { 2 $("#btnOK").click(function() { 3 $.ajax({ 4 type: "Post", 5 url: "data.aspx/GetStr", 6 //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 7 data: "{'str':'我是','str2':'XXX'}", 8 contentType: "application/json; charset=utf-8", 9 dataType: "json", 10 success: function(data) { 11 //返回的数据用data.d获取内容 12 alert(data.d); 13 }, 14 error: function(err) { 15 alert(err); 16 } 17 }); 18 19 //禁用按钮的提交 20 return false; 21 }); 22 });
3、返回数组方法的调用
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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 }
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 $(function() { 2 $("#btnOK").click(function() { 3 $.ajax({ 4 type: "Post", 5 url: "data.aspx/GetArray", 6 contentType: "application/json; charset=utf-8", 7 dataType: "json", 8 success: function(data) { 9 //插入前先清空ul 10 $("#list").html(""); 11 12 //递归获取数据 13 $(data.d).each(function() { 14 //插入结果到li里面 15 $("#list").append("<li>" + this + "</li>"); 16 }); 17 18 alert(data.d); 19 }, 20 error: function(err) { 21 alert(err); 22 } 23 }); 24 25 //禁用按钮的提交 26 return false; 27 }); 28 }); 29 /// <reference path="jquery-1.4.2-vsdoc.js"/> 30 $(function() { 31 $("#btnOK").click(function() { 32 $.ajax({ 33 type: "Post", 34 url: "data.aspx/GetArray", 35 contentType: "application/json; charset=utf-8", 36 dataType: "json", 37 success: function(data) { 38 //插入前先清空ul 39 $("#list").html(""); 40 41 //递归获取数据 42 $(data.d).each(function() { 43 //插入结果到li里面 44 $("#list").append("<li>" + this + "</li>"); 45 }); 46 47 alert(data.d); 48 }, 49 error: function(err) { 50 alert(err); 51 } 52 }); 53 54 //禁用按钮的提交 55 return false; 56 }); 57 });
4、返回Hashtable方法的调用
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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 }
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 $(function() { 2 $("#btnOK").click(function() { 3 $.ajax({ 4 type: "Post", 5 url: "data.aspx/GetHash", 6 //记得加双引号 T_T 7 data: "{ 'key': 'haha', 'value': '哈哈!' }", 8 contentType: "application/json; charset=utf-8", 9 dataType: "json", 10 success: function(data) { 11 alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]); 12 }, 13 error: function(err) { 14 alert(err + "err"); 15 } 16 }); 17 18 //禁用按钮的提交 19 return false; 20 }); 21 });
5、操作xml
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 XMLtest.xml: 2 3 view plaincopy to clipboardprint? 4 <?xml version="1.0" encoding="utf-8" ?> 5 <data> 6 <item> 7 <id>1</id> 8 <name>qwe</name> 9 </item> 10 <item> 11 <id>2</id> 12 <name>asd</name> 13 </item> 14 </data> 15 <?xml version="1.0" encoding="utf-8" ?> 16 <data> 17 <item> 18 <id>1</id> 19 <name>qwe</name> 20 </item> 21 <item> 22 <id>2</id> 23 <name>asd</name> 24 </item> 25 </data>
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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 });
虽功未成,亦未敢藏私,众侠诸神通尽录于此,竟成一笈,名葵花宝典,以飨后世。
邮箱:steven9801@163.com
QQ: 48039387
邮箱:steven9801@163.com
QQ: 48039387