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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
vue-router的两种模式的区别
May 30 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
PHP 一个页面执行时间类代码
2010/03/05 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
javascript中Array()数组函数详解
2015/08/23 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
vue实现在线学生录入系统
2020/05/30 Javascript
Python数据类型学习笔记
2016/01/13 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python实现复制大量文件功能
2019/08/31 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
通过代码实例了解Python sys模块
2020/09/14 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
PHP面试题大全
2015/10/16 面试题
业务副厂长岗位职责
2014/01/03 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
运动会通讯稿300字
2014/02/02 职场文书
租房协议书
2014/04/10 职场文书
公司寄语大全
2014/04/10 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
《穷人》教学反思
2016/02/19 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python