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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
javascript解析json实例详解
Nov 05 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
一个简单且很好用的php分页类
2013/10/26 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
javascript 写类方式之四
2009/07/05 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jquery foreach使用示例
2013/09/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
基于django传递数据到后端的例子
2019/08/16 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
大学迎新晚会主持词
2014/03/24 职场文书
求职信范文大全
2014/05/26 职场文书
课程设计的心得体会
2014/09/03 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
Python实现拼音转换
2021/06/07 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python