$.ajax json數(shù)據(jù)傳遞方法
更新時間:2008年11月19日 16:59:27 作者:
$.ajax下json數(shù)據(jù)的傳遞方法,大家可以參考下。這樣就可以傳遞json數(shù)據(jù)了
前臺
<!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>無標題頁</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">
//這個方法把ajax方法封裝一下,方便調(diào)用。
function myajax(){
//var obj=jsonData();
$.ajax({
type:'post',
url:'ajax.aspx',
data:jsonData(),//可以直接加一個函數(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('');//測試是否調(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">點擊</div>
<div id="response">接收后臺數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺
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>無標題頁</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">
//這個方法把ajax方法封裝一下,方便調(diào)用。
function myajax(){
//var obj=jsonData();
$.ajax({
type:'post',
url:'ajax.aspx',
data:jsonData(),//可以直接加一個函數(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('');//測試是否調(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">點擊</div>
<div id="response">接收后臺數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺
復(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實例代碼
- jquery的ajax異步請求接收返回json數(shù)據(jù)實例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- javascript jQuery $.post $.ajax用法
- 淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
- node.js+Ajax實現(xiàn)獲取HTTP服務(wù)器返回數(shù)據(jù)
- jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
- 原生js實現(xiàn)ajax方法(超簡單)
- jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法
- 一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
- PHP+Mysql+Ajax+JS實現(xiàn)省市區(qū)三級聯(lián)動
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jsp中利用jquery+ajax在前后臺之間傳遞json格式參數(shù)
- javascript實現(xiàn)原生ajax的幾種方法介紹
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 跨域請求之jQuery的ajax jsonp的使用解惑
- 分享5個頂級的JavaScript Ajax組件庫
相關(guān)文章
Jquery動態(tài)進行圖片縮略的原理及實現(xiàn)
圖片縮略在某些情況下還是比較實用的,比如在做一些商品的預(yù)覽圖縮略等等,下面為大家介紹下具體的實現(xiàn)思路及代碼,有需求的朋友可以參考下2013-08-08jQuery選取所有復(fù)選框被選中的值并用Ajax異步提交數(shù)據(jù)的實例
下面小編就為大家?guī)硪黄猨Query選取所有復(fù)選框被選中的值并用Ajax異步提交數(shù)據(jù)的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08jQuery模仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果
在京東或者是天貓上可以看到左側(cè)分類導(dǎo)航菜單,當(dāng)鼠標滑過導(dǎo)航分類時,會出現(xiàn)詳細分類模塊,鼠標移開就會恢復(fù)默認樣式,下面小編給大家?guī)砹嘶?mouseenter()和mouseleave()實現(xiàn)仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果,一起看看吧2016-06-06JQuery UI DatePicker中z-index默認為1的解決辦法
用到JQuery UI的DatePicker時,發(fā)現(xiàn)如果頁面有其他z-index比較大的控件,datepicker就會被遮住而不能操作。2010-09-09jquery簡單實現(xiàn)鼠標經(jīng)過導(dǎo)航條改變背景圖
鼠標經(jīng)過導(dǎo)航條改變背景圖的效果很是好看,下面為大家介紹下使用jquery是如何實現(xiàn)的,感興趣的朋友可以參考下2013-12-12瀏覽器窗口大小變化時使用resize事件對框架不起作用的解決方法
有時候我們需要用resize事件調(diào)整瀏覽器窗口大小,但對框架卻不起作用,這里介紹下實現(xiàn)方法,需要的朋友可以參考下2014-05-05jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05