Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
发布时间:2016-12-30 来源:查字典编辑
摘要:一、AjaxJson.aspx处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下:复制代码代码如下:pro...

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

</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教程学习
编程开发子分类