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的常规数组和关联数组对比小结
May 24 Javascript
Javascript实现字数统计
Jul 03 Javascript
JavaScript构造函数详解
Dec 27 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
一个简单的php路由类
2016/05/29 PHP
php的常量和变量实例详解
2017/06/27 PHP
javascript multibox 全选
2009/03/22 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Django的models中on_delete参数详解
2019/07/16 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python调用百度API实现人脸识别
2020/11/17 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
语文教师个人工作总结
2015/02/06 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python