jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

jQuery AJAX实现调用页面后台方法和web服务定义的方法分享_jquery

WBOY

发布： 2016-05-16 17:55:37

原创

1330 人浏览过

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;
3.无参数的方法调用.大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码：

复制代码代码如下:

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

JS代码：

复制代码代码如下:

 
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
//要用post方式 
type: "Post", 
//方法所在页面和方法名 
url: "Demo.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; 
}); 
}); 

页面代码：

复制代码代码如下:

3.有参数方法调用
后台代码：

复制代码代码如下:

 
[WebMethod] 
public static string GetStr(string str, string str2) 
{ 
return str + str2; 
} 

JS代码：

复制代码代码如下:

 
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.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; 
}); 
}); 

运行效果如下：

4.返回数组方法
后台代码：

复制代码代码如下:

 
[WebMethod] 
public static List GetArray() 
{ 
List li = new List(); 

for (int i = 0; i li.Add(i + ""); 

return li; 
} 

JS代码：

复制代码代码如下:

$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.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; 
}); 
}); 

运行结果图：