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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
微信小程序 教程之事件
Oct 18 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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 cache类代码(php数据缓存类)
2010/04/15 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
经济系大学生求职信
2013/10/01 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
社会工作专业自荐信
2014/09/26 职场文书
学习退步检讨书
2014/09/28 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
求职信格式范文
2015/03/19 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js