利用jquery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code：
复制代码 代码如下:
using system.web.script.services;
[webmethod]
public static string sayhello()
{
return hello ajax!;
}
using system.web.script.services;[webmethod]
public static string sayhello()
{
return hello ajax!;
}
注意：1.方法一定要静态方法，而且要有[webmethod]的声明jquery code：
复制代码 代码如下:
///
$(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;
});
});
///
$(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;
}
using system.web.script.services;[webmethod]
public static string getstr(string str, string str2)
{
return str + str2;
}
jquery code：
复制代码 代码如下:
///
$(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;
});
});
///
$(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 getarray()
{
list li = new list();
for (int i = 0; i li.add(i + );
return li;
}
using system.web.script.services;[webmethod]
public static list getarray()
{
list li = new list();
for (int i = 0; i li.add(i + );
return li;
}
jquery code：
复制代码 代码如下:
///
$(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( + this + );
});
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
});
///
$(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(
+ this + );
}); 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;
}
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：
复制代码 代码如下:
///
$(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;
});
});
///
$(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:
复制代码 代码如下:
1
qwe
2
asd
1
qwe
2
asd
jquery code:
复制代码 代码如下:
$(function() {
$(#btnok).click(function() {
$.ajax({
url: xmltest.xml,
datatype: 'xml', //返回的类型为xml ，和前面的json，不一样了
success: function(xml) {
//清空list
$(#list).html();
//查找xml元素 kvm 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机
$(xml).find(data>item).each(function() {
$(#list).append(id: + $(this).find(id).text() +);
$(#list).append(name:+ $(this).find(name).text() + );
})
},
error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
alert(status);
}
});
//禁用按钮的提交
return false;
});
});
$(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(id: + $(this).find(id).text() +);
$(#list).append(name:+ $(this).find(name).text() + );
})
},
error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
alert(status);
}
}); //禁用按钮的提交
return false;
});
});