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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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
ftp类(example.php)
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
PHP创建XML接口示例
2019/07/04 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JS 常用校验函数
2009/03/26 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
基于python的七种经典排序算法(推荐)
2016/12/08 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
详解Python_shutil模块
2019/03/15 Python
python实现猜数字游戏
2020/03/25 Python
python创建学生管理系统
2019/11/22 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
保护动物倡议书
2014/04/15 职场文书
学前班评语大全
2014/05/04 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
springboot入门 之profile设置方式
2022/04/04 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
Python如何用re模块实现简易tokenizer
2022/05/02 Python