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 相关文章推荐
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
详解Node.JS模块 process
Aug 31 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动态变静态原理
2006/11/25 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python 实现简单的电话本功能
2015/08/09 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
浅谈django中的认证与登录
2016/10/31 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
七年级生物教学反思
2014/01/30 职场文书
建设投标担保书
2014/05/13 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
就业导师推荐信范文
2015/03/27 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
董事长年会致辞
2015/07/29 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python