jQuery AJAX实现调用页面后台方法和web服务定义的方法分享


Posted in Javascript onMarch 01, 2012

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;
3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码:

[WebMethod] 
public static string SayHello() 
{ 
return "Hello Ajax!"; 
}

JS代码:
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
//要用post方式 
type: "Post", 
//方法所在页面和方法名 
url: "Demo.aspx/SayHello", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); //禁用按钮的提交 
return false; 
}); 
});

页面代码:
<form id="form1" runat="server"> 
<div> 
<asp:Button ID="btnOK" runat="server" Text="验证用户" /> 
</div> 
</form>

3.有参数方法调用
后台代码:
[WebMethod] 
public static string GetStr(string str, string str2) 
{ 
return str + str2; 
}

JS代码:
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetStr", 
//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 
data: "{'str':'我是','str2':'XXX'}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); //禁用按钮的提交 
return false; 
}); 
});

运行效果如下:

jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

4.返回数组方法
后台代码:

[WebMethod] 
public static List<string> GetArray() 
{ 
List<string> li = new List<string>(); for (int i = 0; i < 10; i++) 
li.Add(i + ""); 
return li; 
}

JS代码:
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetArray", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//插入前先清空ul 
$("#list").html(""); //递归获取数据 
$(data.d).each(function() { 
//插入结果到li里面 
$("#list").append("<li>" + this + "</li>"); 
}); 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 
//禁用按钮的提交 
return false; 
}); 
});

运行结果图:

jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

Javascript 相关文章推荐
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 #Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 #Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 #Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 #Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 #Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 #Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序自定义联系人弹窗
2020/05/26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python创建关联数组(字典)的方法
2015/05/04 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
zookeeper python接口实例详解
2018/01/18 Python
python的re正则表达式实例代码
2018/01/24 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
生日寿宴答谢词
2014/01/19 职场文书
加油口号大全
2014/06/13 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers