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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
Session的工作方式
2006/10/09 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
详解python的四种内置数据结构
2019/03/19 Python
实例详解Python模块decimal
2019/06/26 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
物业电工岗位职责
2013/11/20 职场文书
计算机求职信
2013/12/01 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
死者家属慰问信
2015/03/24 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
python在package下继续嵌套一个package
2022/04/14 Python