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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
js操作select控件的几种方法
Jun 02 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
ES6学习教程之块级作用域详解
2017/10/09 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python argparser的具体使用
2019/11/10 Python
用python实现名片管理系统
2020/06/18 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
留学推荐信中文范文三篇
2014/01/25 职场文书
开学寄语大全
2014/04/08 职场文书
保密工作责任书
2014/04/16 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
Python装饰器详细介绍
2022/03/25 Python