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 IE中的DOM ready应用技巧
Jul 23 Javascript
javascript window对象属性整理
Oct 24 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
vue下的@change事件的实现
Oct 25 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js实现登录验证码
2016/12/22 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python sort、sorted高级排序技巧
2014/11/21 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python爬取微信公众号文章
2018/08/31 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python 画函数曲线示例
2019/12/04 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python 多线程中join()的作用
2020/10/29 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
什么是岗位职责
2013/11/12 职场文书
企业统计员岗位职责
2013/12/13 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
植树节口号
2014/06/21 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers