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 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
javascript实现获取字符串hash值
May 10 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
什么是跨站脚本攻击
2014/12/11 面试题
JSF的标签库有哪些
2012/04/27 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
电教室标语
2014/06/20 职场文书
劳模先进事迹材料
2014/12/24 职场文书
优秀教研组申报材料
2014/12/26 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
军训新闻稿范文
2015/07/17 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS