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
通過點擊按鈕來請求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
通過點擊按鈕來請求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側(cè)邊欄實現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯,可以參考下本文實現(xiàn)代碼2016-05-05
Jquery修改image的src屬性,圖片不加載問題的解決方法
下面小編就為大家?guī)硪黄狫query修改image的src屬性,圖片不加載問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
本文是對jquery 強制cookie失效的解決方法進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2015-05-05
JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
jquery alert 彈出式 復(fù)選框，需要的朋友可以參考下，代碼有點亂。2009-06-06
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項目的不同需求，需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了jQuery驗證插件validate的使用方法，jQuery.validate.js插件用于對表單輸入進行驗證，對驗證插件感興趣的小伙伴們可以參考一下2016-05-05
jquery結(jié)合css實現(xiàn)返回頂部功能
在本篇文章里小編給大家整理了一篇關(guān)于jquery結(jié)合css實現(xiàn)返回頂部功能的相關(guān)文章，有興趣的朋友們可以實例測試下。2021-08-08
jQuery.cookie.js是個很好的cookie插件，大概的使用方法如下，需要的朋友可以參考下。2011-01-01
jQuery+CSS3+Html5實現(xiàn)彈出層效果實例代碼(附源碼下載)
款Jquery+CSS3+Html5實現(xiàn)彈出層效果,應(yīng)用范圍很廣泛,比如用在消息提示、彈出層顯示內(nèi)容、彈出層登錄等,帶遮罩效果，非常實用，對此功能感興趣的朋友可以參考下本地代碼2016-05-05