jQuery AJAX实现调用页面后台方法
2016-01-04 14:47
585 查看
1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。
4.返回数组方法
后台代码:
JS代码:
页面代码:
运行结果图:
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; }); });
页面代码:
<form id="form1" runat="server"> <div> <asp:Button ID="btnOK" runat="server" Text="验证用户" /> </div> </form>
运行效果如下:
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<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; }); });
页面代码:
相关文章推荐
- 浅析JQuery中的html(),text(),val()区别
- jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
- jQuery提示插件alertify使用指南!
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
- jQuery中data方法内部运行原理
- jquery-懒加载技术(简称lazyload)
- jquery中attr和prop的区别
- jQuery提示插件alertify使用指南
- [转]jQuery实现清空table表格除首行外的所有数据
- 25个可遇不可求的jQuery插件
- 怎么写jQuery的插件
- 用jquery.pager.js实现分页
- jquery easyui datagrid使用参考
- 简单的表单验证插件(Jquery)
- jquery添加移除style/css属性
- jQuery TextEx 简介信息
- 这些年、我收集的JQuery代码 (转)
- JQuery调用iframe子页面函数/对象的方法
- 推荐两款基于JQuery的在线内容编辑器
- 转jQuery获取和操作元素的属性和CSS样式