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 面向对象全新理练之原型继承
Dec 03 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
轮播图组件js代码
Aug 08 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php 获取本地IP代码
2013/06/23 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
详解JavaScript中操作符和表达式
2018/09/12 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Django中使用locals()函数的技巧
2015/07/16 Python
pycharm修改file type方式
2019/11/19 Python
Flask处理Web表单的实现方法
2021/01/31 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
个人找工作自荐信格式
2013/09/21 职场文书
运动会演讲稿200字
2014/08/25 职场文书
教育见习报告范文
2014/11/03 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电