Jquery异步请求数据实例代码


Posted in Javascript onDecember 28, 2011

一、Jquery向aspx页面请求数据
前台页面JS代码:

$("#Button1").bind("click", function () { 
$.ajax({ 
type: "post", 
url: "default.aspx", 
data: "name=" + $("#Text1").val(), 
success: function (result) { 
alert(result.msg); 
} 
}); 
});

<input id="Text1" type="text" value='张三'/> 
<input id="Button1" type="button" value="提交" />

后台cs代码:
protected void Page_Load(object sender, EventArgs e) 
{ 
if (Request["name"]!=null) 
{ 
Response.ContentType = "text/json"; 
Response.Write("{\"msg\":\""+Request["name"]+"\"}");//将数据拼凑为Json 
Response.End(); 
} 
}

二、Jquery向WebService页面请求数据
$("#Button2").bind("click", function () { 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "WebService.asmx/HelloWorld", 
data: "{name:'" + $("#Text1").val() + "'}", 
datatype: "json", 
success: function (result) { 
alert(result.d); 
} 
}); 
}); 
<input id="Button2" type="button" value="向WebService提交" />

WebService代码
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
/// <summary> 
/// Summary description for WebService 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService { 
public WebService () { 
//Uncomment the following line if using designed components 
//InitializeComponent(); 
} 
[WebMethod] 
public string HelloWorld( string name) { 
return "Hello World"+name; 
} 
}

三、Jquery向ashx请求数据和向页面相同
Js代码:
$("#Button3").bind("click", function () { 
$.ajax({ 
type: "post", 
url: "Handler.ashx", 
data: "name=" + $("#Text1").val(), 
success: function (result) { 
alert(result.msg); 
} 
}); 
});

后台代码:
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/json"; 
context.Response.Write("{\"msg\":\"Hello World"+context.Request["name"]+"来自handler.ashx\"}"); 
context.Response.End(); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

代码下载
Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
vue之数据交互实例代码
Jun 16 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 #Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 #Javascript
JavaScript中的property和attribute介绍
Dec 26 #Javascript
JavaScript打字小游戏代码
Dec 26 #Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 #Javascript
js 函数调用模式小结
Dec 26 #Javascript
JavaScript 原型继承
Dec 26 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
python Crypto模块的安装与使用方法
2017/12/21 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python中property和setter装饰器用法
2019/12/19 Python
如何通过python检查文件是否被占用
2020/12/18 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
中学生打架检讨书
2014/02/10 职场文书
销售个人求职信范文
2014/04/28 职场文书
社区服务活动总结
2014/05/07 职场文书
霸气队列口号
2014/06/18 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
道德与公民自我评价
2015/03/09 职场文书
企业投资意向书
2015/05/09 职场文书
初中物理教学反思
2016/02/19 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Redis主从复制操作和配置详情
2022/09/23 Redis