jquery调用asp.net 页面后台的实现代码


Posted in Javascript onApril 27, 2011

先创建一个aspx页面编写一个客户端控件<input type="button" id="AjaxDemo"
value="AjaxDemo">
再aspx后台的页面编写一个简单的方法,代码如下:

[WebMethod] 
public static string ABC(string ABC) 
{ 
return ABC; 
}

必须声明为静态方法,并且它们必须使用 [WebMethod] 特性标注。但是在webservice里面不必是静态方法,它的对象可以是list、dataset、class对象等……
接下来就应该考虑怎么让前台的客户端控件调用到后台的方法了..这时jqury登场了..
在页面引入jquery类库
<script type="text/javascript"
src="JQuery/jquery-1.3.2-vsdoc2.js"></script>
在页面添加脚本代码如下:
<script type="text/javascript"> 
$().ready( function() { 
$("#AjaxDemo").click(function() { 


$.ajax({ 
type: "POST", 




url: "Default.aspx/ABC", 
data: "{'ABC':'test'}", 
contentType: "application/json; charset=utf-8", 
success: function(msg) {alert(msg); } 
}) 
}) 
} 
) 
</script >

这样就大功告成了!很多事情都是jquery类库帮我们做完了,我们这里讨论的是如何用,具体里面怎么实现,我们不关心!
jquery里还有很多像$.ajax这样的方法提供给我们使用.大家可以试试!
补充:注意要建3.5的项目,如果是2.0的话。配置文件会少很多引用的,如果你建的是2.0项目的话。建个3.5的。把3.5的配置文件覆盖到2.0的项目即可!
上面的代码如果成功之后弹出的是"{d:test}",是因为他返回的是字符串,我们可以将他改成返回json对象.
把jquery代码修改如下
$().ready( 
function() { 
$("#AjaxDemo").click(function() { 
$.ajax({ 
type: "POST", 



url: "Default.aspx/ABC", 
data: "{'ABC':'test'}", 
dataType: "json", 
contentType: "application/json; charset=utf-8", 
success: function(msg) {alert(msg.d); } 
}) 
}) 
} 
}

我们设置他返回的数据是json对象,现在我们可以用返回的json对象,根据弹出来的d:test,我们可以很明显看到key是d,值是test,那我们利用返回的数据msg对象直接点d,就可以获得test的,修改了代码之后.现在弹出来就是test了..
Javascript 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
jquery的live使用注意事项
Feb 18 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 #Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 #Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 #Javascript
javascript中的继承实例代码
Apr 27 #Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 #Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 #Javascript
js实时监听文本框状态的方法
Apr 26 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php数组查找函数总结
2014/11/18 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
DEFER怎么用?
2006/07/01 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
理解JavaScript原型链
2016/10/25 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Python的标准模块包json详解
2017/03/13 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
贷款担保申请书
2014/05/20 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
php+laravel 扫码二维码签到功能
2021/05/15 PHP
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript