这次给大家带来jquery+ajax调用页面的后台，jquery+ajax调用页面后台的注意事项有哪些，下面就是实战案例，一起来看一下。
本文实例为大家分享了jquery ajax调用页面后台方法，供大家参考，具体内容如下
1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。
using system.web.services;
1）.无参数的方法调用.
大家注意了，这个版本不能低于.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;
});
});
页面代码：
<form id="form1" runat="server">
<p>
<asp:button id="btnok" runat="server" text="验证用户" />
</p>
</form>
运行效果如下：
2）.有参数方法调用
后台代码：
[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;
});
});
运行效果如下：
3）.返回数组方法
后台代码：
[webmethod]
public static list<string> getarray()
{
list<string> li = new list<string>();
for (int i = 0; i < 10; 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("<li> + this + </li>);
});
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
});
页面代码：
<form id="form1" runat="server">
<p>
<asp:button id="btnok" runat="server" text="验证用户" />
</p>
<ul id="list">
</ul>
</form>
运行结果图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax不刷新的情况下省市县三级联动
ajax实现显示页面后才加载
以上就是jquery+ajax调用页面的后台的详细内容。