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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
js Function类型
Dec 04 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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学习笔记 数组的常用函数
2011/06/13 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python字典DICT类型合并详解
2017/08/17 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
组织关系转移介绍信
2014/01/16 职场文书
表彰大会主持词
2014/03/26 职场文书
运动会标语
2014/06/21 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
办理护照工作证明
2014/10/10 职场文书
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python