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 权威指南(第四版) 读书笔记
Aug 11 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
javascript cookie的简单应用
Feb 24 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
Vue的props父传子的示例代码
May 20 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
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python设置值及NaN值处理方法
2018/07/03 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Araks官网:纽约内衣品牌
2020/10/15 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
个人近期表现材料
2014/02/11 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android