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

更新时间：2010年03月15日 22:09:51 作者：

处理业务数据，产生JSon数据，供JqueryRequest.aspx调用

一、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> 

您可能感兴趣的文章:

Jquery
Ajax

jQuery侧边栏实现代码
本文给大家介绍jquery侧边栏实现代码，这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,可以参考下本文实现代码
2016-05-05
Jquery修改image的src属性,图片不加载问题的解决方法
下面小编就为大家带来一篇Jquery修改image的src属性,图片不加载问题的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
jQuery实现强制cookie过期方法汇总
本文是对jquery 强制cookie失效的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
2015-05-05
JQuery实现表格数据行上移与下移
这篇文章主要为大家详细介绍了JQuery实现表格数据行上移与下移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jquery.alert 弹出式复选框实现代码
jquery alert 弹出式复选框，需要的朋友可以参考下，代码有点乱。
2009-06-06
jquery可定制的在线UEditor编辑器
这篇文章主要介绍了jquery可定制的在线UEditor编辑器，UEditor的功能非常强大，ueditor更具有功能插件接口，很轻松地添加自己定义功能到编辑器中，方便项目的不同需求，需要的朋友可以参考下
2015-11-11
jQuery验证插件validate使用详解
这篇文章主要为大家详细介绍了jQuery验证插件validate的使用方法，jQuery.validate.js插件用于对表单输入进行验证，对验证插件感兴趣的小伙伴们可以参考一下
2016-05-05
jquery结合css实现返回顶部功能
在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。
2021-08-08
基于jquery的cookie的用法
jQuery.cookie.js是个很好的cookie插件，大概的使用方法如下，需要的朋友可以参考下。
2011-01-01
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
款Jquery+CSS3+Html5实现弹出层效果,应用范围很广泛,比如用在消息提示、弹出层显示内容、弹出层登录等,带遮罩效果，非常实用，对此功能感兴趣的朋友可以参考下本地代码
2016-05-05