Jquery Ajax 學(xué)習(xí)實例2 向頁面發(fā)出請求 返回JSon格式數(shù)據(jù)
更新時間：2010年03月15日 22:09:51 作者：
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用
一、AjaxJson.aspx
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用，代碼如下:
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
通過點(diǎn)擊按鈕來請求AjaxJson.aspx，獲取JSon數(shù)據(jù)。代碼如下：
<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>
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用，代碼如下:
復(fù)制代碼 代碼如下:
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
通過點(diǎn)擊按鈕來請求AjaxJson.aspx，獲取JSon數(shù)據(jù)。代碼如下：
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
setInterval與clearInterval的使用示例代碼
本篇主要是對setInterval與clearInterval的使用示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jQuery實現(xiàn)滾動切換的tab選項卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼討B(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本文主要介紹了Jquery Easyui驗證擴(kuò)展，Easyui驗證，Easyui校驗，js正則表達(dá)式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了自己編寫簡單的jQuery提示插件的方法及示例，非常的不錯，推薦給正在學(xué)習(xí)jQuery的小伙伴。2014-12-12
測類、方法、變量或?qū)傩允欠褚汛嬖?，這是Javascript編程基礎(chǔ)知識。在這里我們就是要檢測jQuery()或$()函數(shù)是否存在2011-05-05
jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）
本篇文章主要介紹了jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了JQuery 動態(tài)生成Table表格實例代碼的相關(guān)資料,這里附有實現(xiàn)實例代碼，具有一定的參考價值，需要的朋友可以參考下2016-12-12
想必大家對于jQuery這個最流行的javascript類庫都不陌生，而且只要是前端開發(fā)人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實際使用效率，將介紹一些書寫高質(zhì)量jQuery代碼的原則，不單單會告訴你如何去書寫，也會告訴你為什么這樣書寫，希望大家會覺得有所幫助2014-03-03