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


Posted in Javascript onMarch 01, 2012

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

运行效果如下:

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

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 AJAX实现调用页面后台方法和web服务定义的方法分享

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
全面理解闭包机制
Jul 11 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 #Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 #Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 #Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 #Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 #Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 #Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 #Javascript
You might like
php重定向的三种方法分享
2012/02/22 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
jquery uaMatch源代码
2011/02/14 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
python算法题 链表反转详解
2019/07/02 Python
python集合删除多种方法详解
2020/02/10 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python 如何将office文件转换为PDF
2020/09/22 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
学生请假条格式
2014/04/11 职场文书
求职信的正确写法
2014/07/10 职场文书
金融管理专业求职信
2014/07/10 职场文书
小学庆六一活动总结
2014/08/28 职场文书
学校远程教育工作总结
2015/08/11 职场文书
教师远程研修感悟
2015/11/18 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
python开发制作好看的时钟效果
2022/05/02 Python