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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
vue路由教程之静态路由
Sep 03 Javascript
JavaScript实现滑块验证解锁
Jan 07 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
React全家桶环境搭建过程详解
2018/05/18 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python django model联合主键的例子
2019/08/06 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
保安自我鉴定范文
2013/12/08 职场文书
实习生自我鉴定
2013/12/12 职场文书
安全资料员岗位职责
2013/12/14 职场文书
内业资料员岗位职责
2014/01/04 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
淘宝客服工作职责
2014/07/11 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Win2008系统搭建DHCP服务器
2022/06/25 Servers