JQuery调用asp.net后台方法 .

利用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 ; }); });

 

运行结果：

转载于:https://www.cnblogs.com/Nina-piaoye/archive/2012/11/05/2755329.html