JQuery调用asp.net后台方法

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

先来个简单的实例热热身吧。

1、无参数的方法调用

asp.net code：

using System.Web.Script.Services;

[WebMethod]
public static string SayHello()
{
return " Hello Ajax! " ;
}

注意：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/zhaoyun1016/archive/2010/06/24/1764089.html