当前位置:首页 > 网站制作 > jQuery教程 > Jquery Ajax实例2:向页面发出请求 返回JSon格式数据

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

2017-01-06 | 来源:网络 | 关键字: jqueryajax实例 jquery中ajax请求json
一、AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender,

一、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>liehuo.net</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"> www.ALONELY.com.cn
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>

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《Jquery Ajax实例2:向页面发出请求 返回JSon格式数据》更多评论

阅读下一篇

基于jQuery框架开发的控件/插件大合集

Coda Popup Bubbles 采用jQuery开发,类似“冒泡”效果的提醒弹出框。 主页:http://jqueryfordesigners.com/coda-popu ... 查看全文

返回jQuery教程 返回网站首页