jQuery AJAX实现调用页面后台方法

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代码：

$(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;         });     });

页面代码：

<form id="form1" runat="server">

<div>

<asp:Button ID="btnOK" runat="server" Text="验证用户" />

</div>

<ul id="list">

</ul>

</form>

运行结果图：

摘自：http://www.cnblogs.com/XuebinDing/archive/2012/03/01/2376041.html

转载于:https://www.cnblogs.com/love828/p/3332019.html

jQuery AJAX实现调用页面后台方法相关推荐

ajax,html,aspx,Net WebForm jQuery Ajax 传值到aspx后台
1.在Net WebForm中,编写aspx文件,有时候想在后台编写类似WebAPI形式的方法.前台使用jQuery Ajax方式调用.[PS:jQuery ajax Get方式将直接走后台Page_ ...
ajax调用后台java类_ajax调用java后台方法是什么
ajax是一种基于 JavaScript和HTTP请求(HTTP requests),广泛应用在浏览器的网页开发技术.那么,ajax调用java后台方法是什么? var http_request=fa ...
php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...
js中ajax刷新页面,django+js+ajax实现刷新页面的方法
本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服 ...
ajax返回报错html,Jquery AJAX POST调用返回200状态确定，但错误
嗨我已经实现了一个Ajax POST请求来调用Web服务.它总是返回200行,但执行失败的事件我已经尝试了很多事情,但我没有得到我犯的错误.我在这里添加我的代码. Fiddler显示响应内容,但Aja ...
jquery调用asp.net 页面后台方法
先创建一个aspx页面编写一个客户端控件<input type="button" id="AjaxDemo" value="AjaxDemo&q ...
jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
ajax三种错误ie,ie下jquery ajax 80020101错误的解决方法
注意注释删除这些注释就可以了 Windows下一个MySQL有些错误的解决方法 1.无论是什么提示.我们有一个直接看错误日志.由于它描述了最具体描述错误日志. 于MySQL安装文件夹中找到 my.i ...
实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[' ...
Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法
当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx ...

jQuery AJAX实现调用页面后台方法

jQuery AJAX实现调用页面后台方法相关推荐

最新文章

热门文章