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
jQuery AJAX实现调用页面后台方法的更多相关文章
- c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询
天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. 不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...
- Javascript调用C#后台方法及JSon解析
Javascript调用C#后台方法及JSon解析 如何使用Ajax 调用C# 后台方法. 本文目录 如何使用Ajax 调用C# 后台方法. 1.后台(.cs)测试方法 2.前台调用(javasc ...
- jQuery ajax Load关闭缓存的方法
[导读] 在jQuery ajax Load关闭缓存的方法很简单,我们只要在$ ajaxSetup中把cache: false就楞以了,当然我们还可以使用一个随机参数来实例了.简单介绍load(url ...
- IE,Google Chrome等浏览器,调试模式在控制台可以手动调用页面的方法来调试
IE,Google Chrome等浏览器,调试模式在控制台可以手动调用页面的方法来调试,这种方式也可以进断点.
- jquery 使用ajax调用c#后台方法
$.ajax({ type: "get", cache: false, ...
- jquery调用页面的方法
本文转载:http://www.cnblogs.com/chenxizhang/archive/2009/05/28/1491250.html 有些朋友问到,能不能在jquery代码中调用后台cs页面 ...
- asp.net Ajax调用Aspx后台方法
Ajax调用的前提(以aspx文件为例:) 1.首先需要在aspx文件后台中引用using System.Web.Services; 2.需要调用的方法必须是公共的(public).静态的(stati ...
- jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
随机推荐
- 【POJ2774】Long Long Message (后缀数组)
Long Long Message Description The little cat is majoring in physics in the capital of Byterland. A p ...
- LeetCode 面试:Add Two Numbers
1 题目 You are given two linked lists representing two non-negative numbers. The digits are stored in ...
- 【HDOJ】4612 Warm up
双连通缩点+求树的直径,图论基础题目. /* 4612 */ #pragma comment(linker, "/STACK:1024000000,1024000000") #in ...
- ARM 开发板嵌入式linux系统与主机PC通过串口传输文件
本文转载自http://useless20.blog.163.com/blog/static/237409982010227127576/ 嵌入式linux系统与主机通过串口传输文件 我想如果要从PC ...
- Delphi安装/卸载OCX控件的方法
delphi 安装卸载ocx 请参见 如下 http://blog.csdn.net/xt_chaoji/article/details/7027298 打开Delphi,关闭所有项目. 1. ...
- Windows下安装和配置Maven的方法及注意事项
首先,从http://maven.apache.org/download.cgi网站上下载适用于当前操作系统操作格式的最新版本的maven安装包.如:apache-maven-3.2.5-bin.zi ...
- Tree2cycle
Problem Description A tree with N nodes and N-1 edges is given. To connect or disconnect one edge, w ...
- Apache+PHP 环境上传文件配置
打开php.ini 配置文件,查找 File Uploads ,在这个区域有以下3个选项: file_uploads = On 是否允许HTTP文件上传.默认值为On允许HTTP文件上传,此选项不能设 ...
- bzoj 3156 防御准备(斜率DP)
3156: 防御准备 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 837 Solved: 395[Submit][Status][Discuss] ...
- JavaScript高级程序设计14.pdf
继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 构造函数.原型.和实例的关系:每个构造函数都有一个原型对象,每个原型对象都包含一个指向构造函数的指针,每个实例都包含一 ...