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

265 阅读 0 评论 175 点赞

我是靠谱客的博主勤奋鞋子，最近开发中收集的这篇文章主要介绍Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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