Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
作者:bea
一、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}
一、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>
有用 | 无用
处理业务数据,产生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 简单图片导航插件jquery.imgNav.js
- Array.prototype.slice.apply的使用方法
- javascript 打开页面window.location和window.open的区别
- input 输入框内的输入事件详细分析
- js replace() 文本替换你所不知的
- javascript 新闻标题静态分页代码 (无刷新)
- Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
- javascript中的undefined 与 null 的区别 补充篇
- javascript+iframe 实现无刷新载入整页的代码
- js select常用操作控制代码
- js实现的日期操作类DateTime函数代码
- js 翻转颜色实现代码
- javascript json2 使用方法
- jQuery 选择器理解
- jQuery 学习入门篇附实例代码
- Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
- Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
- javascript 二维数组的实现与应用
- JavaScript 中文转拼音实现代码 有些bug