Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据


Posted in Javascript onMarch 15, 2010

一、AjaxJson.aspx

处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下:

protected void Page_Load(object sender, EventArgs e) 
{ 
string u = Request["UserName"]; 
string p = Request["Password"]; 
string output = string.Format("'UserName':'{0}','Password':'{1}'", u, p); 
Response.Write("[{"); 
Response.Write(output); 
Response.Write("}]"); 
Response.End(); 
}

二、JqueryRequest.aspx

通过点击按钮来请求AjaxJson.aspx,获取JSon数据。代码如下:


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="text" name="Text1" id="Text1"/><br /> 
<input type="text" name="Text2" id="Text2"/> 
<br /> 
<input type="button" id="btn1" onclick="BtnClick()" /> 
</div> 
<div id="dd"> 
sd 
</div> 
<div> 
<script type="text/javascript" language="javascript"> 
function BtnClick() { 
var uid = $("#Text1").val(); 
var pwd = $("#Text2").val(); 
$.ajax({ 
url: "AjaxJson.aspx", 
type: "POST", 
data: { UserName: uid, Password: pwd }, 
success: function(data) { 
var json = eval(data); //eval("(" + data + ")"); 
$.each(json, function(idx, item) { 
var user = item.UserName; 
var pass = item.Password; 
$("#dd").html("<h1>用户名:" + user + " 密码:" + pass + "</h1>"); 
}); 
} 
}); 
} 
</script> 
</div> 
</form> 
</body> 
</html>

Javascript 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Vue指令指令大全
Feb 09 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
jQuery MD5加密实现代码
Mar 15 #Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 #Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 #Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 #Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 #Javascript
javascript css styleFloat和cssFloat
Mar 15 #Javascript
javascript 嵌套的函数(作用域链)
Mar 15 #Javascript
You might like
深入php中var_dump方法的使用详解
2013/06/24 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
自动更新作用
2006/10/08 Javascript
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python实现上下文管理器的方法
2020/08/07 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
茶叶生产计划书
2014/01/10 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
部队2014年终工作总结
2014/11/27 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
初一英语教学反思
2016/02/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
vue选项卡切换的实现案例
2022/04/11 Vue.js