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的一些特性和用法整理小结
Jan 13 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
js实现点击生成随机div
Jan 16 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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 数组实例说明
2008/08/18 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
python3简单实现微信爬虫
2015/04/09 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
未受刑事制裁公证证明
2014/09/20 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书