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 相关文章推荐
js操作checkbox遇到的问题解决
Jun 29 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
js中数组对象去重的两种方法
Jan 18 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
jQuery技巧总结
2011/01/01 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
jupyter安装小结
2016/03/13 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
技术总监岗位职责
2013/12/05 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
一个都不能少观后感
2015/06/04 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Python中异常处理用法
2021/11/27 Python