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下操作css的float属性的特殊写法
Aug 22 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
javascript基本算法汇总
2016/03/09 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js实现抽奖效果
2017/03/27 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python作用域用法实例详解
2016/03/15 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
药学专业大学生自荐信
2013/09/28 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
表决心的诗句大全
2014/03/11 职场文书
工作建议书范文
2014/05/13 职场文书
优质服务演讲稿
2014/05/14 职场文书
2014年卫生工作总结
2014/11/27 职场文书
先进党员事迹材料
2014/12/24 职场文书
公司人事任命通知
2015/04/20 职场文书
资产移交协议书
2016/03/24 职场文书