利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code:
1
2
|
<div
class
=
"cnblogs_code"
><pre><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http:
//www.CodeHighlighter.com/<br /><br />--><span style="color: #0000ff;">using</span><span style="color: #000000;"> System.Web.Script.Services; <br> <br>[WebMethod] <br></span><span style="color: #0000ff;">public</span><span style="color: #000000;"> </span><span style="color: #0000ff;">static</span><span style="color: #000000;"> </span><span style="color: #0000ff;">string</span><span style="color: #000000;"> SayHello() <br>{ <br> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">Hello Ajax!</span><span style="color: #800000;">"</span><span style="color: #000000;">; <br>} </span></div></pre>
</div>
|
注意: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 ; }); });
结果:
2、带参数的方法调用
asp.net code:
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 ; }); });
运行结果:
下面进入高级应用罗
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; }
JQuery code:
/// <reference path="jquery-1.4.2-vsdoc.js"/> $(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方法的调用
asp.net 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:
/// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $( " #btnOK " ).click(function() { $.ajax({ type: " Post " , url: " data.aspx/GetHash " , // 记得加双引号 T_T data: " { '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 >
JQuery code:
$(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( " <li>id: " + $( this ).find( " id " ).text() + " </li> " ); $( " #list " ).append( " <li>Name: " + $( this ).find( " name " ).text() + " </li> " ); }) }, error: function(result, status) { // 如果没有上面的捕获出错会执行这里的回调函数 alert(status); } }); // 禁用按钮的提交 return false ; }); });
运行结果: