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

发布时间：2020-12-14 22:42:10 所属栏目：资源来源：网络整理

导读：一、AjaxJson.aspx 处理业务数据，产生JSon数据，供JqueryRequest.aspx调用，代码如下: 复制代码代码如下: protected void Page_Load(object sender,EventArgs e) { string u = Request["UserName"]; string p = Request["Password"]; string output = stri

一、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 学习实例2 向页面发出请求 返回JSon格式数据

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