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

来源:http://www.mnuet.com 作者:论坛中心 人气:57 发布时间:2020-03-22
摘要:1.新建demo.aspx页面。 2.首先在该页面的后台文件demos.aspx.cs中添加引用。using System.Web.Services;3.无参数的方法调用.大家注意了,这个版本不能低于.net framework2.0。2.0已下不支持的。 后台代

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代码: 复制代码 代码如下: $ { $.click { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "Demo.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function { //返回的数据用data.d获取内容 alert; }, error: function; } }); //禁用按钮的提交 return false; }); }); 页面代码: 复制代码 代码如下: 3.有参数方法调用 后台代码: 复制代码 代码如下: [WebMethod] public static string GetStr(string str, string str2) { return str + str2; } JS代码: 复制代码 代码如下: $ { $.click { $.ajax({ type: "Post", url: "demo.aspx/GetStr", //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function { //返回的数据用data.d获取内容 alert; }, error: function; } }); //禁用按钮的提交 return false; }); }); 运行效果如下:

4.返回数组方法后台代码:复制代码 代码如下: [WebMethod] public static List GetArray() { List li = new List(); for (int i = 0; i < 10; i++) li.Add; return li; } JS代码: 复制代码 代码如下: $ { $.click { $.ajax({ type: "Post", url: "demo.aspx/GetArray", contentType: "application/json; charset=utf-8", dataType: "json", success: function { //插入前先清空ul $; //递归获取数据 $.each { //插入结果到li里面 $.append("

" + this + "

"); }); alert; }, error: function; } }); //禁用按钮的提交 return false; }); });

运行结果图:

本文由广东十一选五一定牛发布于论坛中心,转载请注明出处:jQuery AJAX实现调用页面后台方法和web服务定义的方

关键词:

最火资讯