jQuery AJAX实现调用页面后台方法
更新时间：2016年05月09日 10:04:27 作者：XuebinDing
这篇文章主要为大家详细介绍了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">
<div>
<asp:Button ID="btnOK" runat="server" Text="验证用户" />
</div>
</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"> <div> <asp:Button ID="btnOK" runat="server" Text="验证用户" /> </div> <ul id="list"> </ul> </form>
运行结果图：
jQuery AJAX实现调用页面后台方法就为大家介绍到这，希望对大家的学习有所启发。
相关文章
在网站调用加载评论等信息的时候遇到了不同域名间javascript不能执行的问题，一直都在加载中显示不出来，而换个网址访问的话就能正确显示，一直没去注意浏览器提示的错误信息:2008-04-04
运用Ajax做了一个名字检验，第一次是有效的，但是提交过后，再检验一次，结果就不对了，是由于IE的cache的原因，接下来介绍下详细的解决方法，感性的朋友可以参考下哈2013-04-04
AJAX和DOM的运行经验...2007-03-03
ajax接收Date类型的数据时将会把数据转换为时间戳，下面是具体的示例，大家可以参考下2014-05-05
ajax 自动完成下拉框 自动提示位置问题...2007-02-02
本文通过实例代码给大家介绍了Ajax实现动态加载组合框功能，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了Ajax实现注册并选择头像后上传功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了ajax调用中ie缓存问题解决方法,较为详细的分析了ajax调用中ie缓存机制的原理与具体解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了Ajax跨域访问Cookie丢失问题的解决方法,需要的朋友可以参考下2017-02-02
本文主要介绍了ajax实现分页查询的步骤与方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论