$.ajax json數(shù)據(jù)傳遞方法
更新時(shí)間：2008年11月19日 16:59:27 作者：
$.ajax下json數(shù)據(jù)的傳遞方法，大家可以參考下。這樣就可以傳遞json數(shù)據(jù)了
前臺(tái)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標(biāo)題頁(yè)</title>
<style type="text/css">
.show{ display:block;}
.hide{ display:none;}
</style>
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
//這個(gè)方法把a(bǔ)jax方法封裝一下，方便調(diào)用。
function myajax(){
//var obj=jsonData();
$.ajax({
type:'post',
url:'ajax.aspx',
data:jsonData(),//可以直接加一個(gè)函數(shù)名。
dataType:'json',
beforeSend:beforecall,
success:callback
});
}
//封裝json數(shù)據(jù)，為了代碼清晰
function jsonData(){
var jsonStr="({";
jsonStr+="\"name\":";
jsonStr+="\"tree\"";
jsonStr+=",";
jsonStr+="\"id\":";
jsonStr+="\"123\"";
jsonStr+="})";
return eval(jsonStr);//關(guān)鍵在于轉(zhuǎn)換。
}
//調(diào)用前方法,不成功
function beforecall(){
$('#wait').addClass("show").append('調(diào)出中...');
//alert('');//測(cè)試是否調(diào)用
}
//回調(diào)函數(shù)
function callback(data){
$('#response').append(data.name+data.id);
$('#wait').css("display","none");
}
//onload()事件
$(function(){
$('#confirm').click(myajax);
})
</script>
</head>
<body>
<div id="confirm">點(diǎn)擊</div>
<div id="response">接收后臺(tái)數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺(tái)
protected void Page_Load(object sender, EventArgs e)
{
Hashtable ht = new Hashtable();
string name = Request.Params["name"].ToString();
string birth = Request.Params["birthday"].ToString();
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(birth))
{
//Response.ContentType = "Application/json";
//Response.Write(CreareJson("this is ok!", 1, name, birth));
ht.Add("info", "成功了");
ht.Add("sta", "狀態(tài)");
ht.Add("name", name);
ht.Add("birth", birth);
Response.Write(CreateJsonParams(ht));
}
Response.End();
}
private string CreateJsonParams(Hashtable items)
{
string returnStr = "";
foreach(DictionaryEntry item in items)
{
returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\",";
}
return "{" + returnStr.Substring(0,returnStr.Length-1) + "}";
}
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標(biāo)題頁(yè)</title>
<style type="text/css">
.show{ display:block;}
.hide{ display:none;}
</style>
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
//這個(gè)方法把a(bǔ)jax方法封裝一下，方便調(diào)用。
function myajax(){
//var obj=jsonData();
$.ajax({
type:'post',
url:'ajax.aspx',
data:jsonData(),//可以直接加一個(gè)函數(shù)名。
dataType:'json',
beforeSend:beforecall,
success:callback
});
}
//封裝json數(shù)據(jù)，為了代碼清晰
function jsonData(){
var jsonStr="({";
jsonStr+="\"name\":";
jsonStr+="\"tree\"";
jsonStr+=",";
jsonStr+="\"id\":";
jsonStr+="\"123\"";
jsonStr+="})";
return eval(jsonStr);//關(guān)鍵在于轉(zhuǎn)換。
}
//調(diào)用前方法,不成功
function beforecall(){
$('#wait').addClass("show").append('調(diào)出中...');
//alert('');//測(cè)試是否調(diào)用
}
//回調(diào)函數(shù)
function callback(data){
$('#response').append(data.name+data.id);
$('#wait').css("display","none");
}
//onload()事件
$(function(){
$('#confirm').click(myajax);
})
</script>
</head>
<body>
<div id="confirm">點(diǎn)擊</div>
<div id="response">接收后臺(tái)數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺(tái)
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Hashtable ht = new Hashtable();
string name = Request.Params["name"].ToString();
string birth = Request.Params["birthday"].ToString();
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(birth))
{
//Response.ContentType = "Application/json";
//Response.Write(CreareJson("this is ok!", 1, name, birth));
ht.Add("info", "成功了");
ht.Add("sta", "狀態(tài)");
ht.Add("name", name);
ht.Add("birth", birth);
Response.Write(CreateJsonParams(ht));
}
Response.End();
}
private string CreateJsonParams(Hashtable items)
{
string returnStr = "";
foreach(DictionaryEntry item in items)
{
returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\",";
}
return "{" + returnStr.Substring(0,returnStr.Length-1) + "}";
}
您可能感興趣的文章:
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- JQuery處理json與ajax返回JSON實(shí)例代碼
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- javascript jQuery $.post $.ajax用法
- 淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
- node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)
- jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
- 原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
- jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jsp中利用jquery+ajax在前后臺(tái)之間傳遞json格式參數(shù)
- javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- 分享5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)
相關(guān)文章
jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法
這篇文章主要介紹了jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法,實(shí)例分析了jQuery中toggleClass方法操作class樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery的總體架構(gòu)分析及實(shí)現(xiàn)示例詳解
學(xué)習(xí)開源框架，童鞋們最想學(xué)到的就是設(shè)計(jì)的思想和實(shí)現(xiàn)的技巧。最近研究jQuery源碼，記錄一下我對(duì)jquery的理解和心得，跟大家分享，權(quán)當(dāng)拋磚引玉。2014-11-11
接著上次tabs的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第二個(gè)功能——tooltip的學(xué)習(xí)。2009-07-07
下面小編就為大家?guī)硪黄猨query select2的使用心得(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷(可換膚)
點(diǎn)擊姓名會(huì)顯示她的基本詳細(xì)信息，點(diǎn)擊切換皮膚，會(huì)更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷2013-04-04
jquery實(shí)現(xiàn)有過渡效果的tab切換
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)有過渡效果的tab切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
jQuery實(shí)現(xiàn)火車票買票城市選擇切換功能
本文通過實(shí)例代碼給大家分享了jQuery實(shí)現(xiàn)火車票買票城市選擇切換功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
本文主要通過jQuery基礎(chǔ)知識(shí)、選擇要操作的元素及處理DOM元素3個(gè)方面給我們做了下小結(jié)，非常的詳盡，推薦給有需要的小伙伴。2014-12-12
自己寫的一個(gè)菜單(因?yàn)槭浅鯇W(xué) 不知道能不能算無限級(jí))2010-05-05
jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)硪黄猨Query的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08