jQuery AJAX实现调用页面后台方法
1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。
3.无参数的方法调用.
大家注意了,这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码:
JS代码:
页面代码:
运行效果如下:
3.有参数方法调用
后台代码:
JS代码:
运行效果如下:
4.返回数组方法
后台代码:
JS代码:
页面代码:
运行结果图:
主要研究技术:C#、WinForm、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、 JavaScript、HTML5、CSS3、JQuery、Silverlight、WPF、WCF等技术。
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':'**'}",
- 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;
- });
- });
页面代码:
- <form id="form1" runat="server">
- <div>
- <asp:Button ID="btnOK" runat="server" Text="验证用户" />
- </div>
- <ul id="list">
- </ul>
- </form>
运行结果图:
主要研究技术:C#、WinForm、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、 JavaScript、HTML5、CSS3、JQuery、Silverlight、WPF、WCF等技术。
【jQuery AJAX实现调用页面后台方法】相关文章
2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
4. Firefox实现HTML5音视频播放GStreamer后端支持
6. jQuery快速实现自动隐藏/展示的页面顶端固定菜单效果
7. jQuery实现页面元素在浏览器中任何时候保持全屏展示效果
10. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
本文来源:https://www.51html5.com/a1336.html
﹝jQuery AJAX实现调用页面后台方法﹞相关内容
- html5的自定义data-*属性与jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- html5的自定义data-*属性与jquery的data()方法的使用
- jQuery animate方法开发极客标签Logo动画融合效果
- 帮助快速生成页面固定显示元素的jQuery插件
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
- phonegap教程第二讲 Jquery Mobile页面与对话框
- 使用jQuery快速添加一个页面的悬浮覆盖层
- 分享一款页面视差滚动切换jquery.localscroll插件
- 帮助快速生成页面固定显示元素的jQuery插件