json實現(xiàn)前后臺的相互傳值詳解
更新時間：2015年01月05日 14:27:06 投稿：hebedich
這篇文章主要介紹了json實現(xiàn)前后臺的相互傳值詳解,需要的朋友可以參考下
前后臺的相互傳值如果值太多，寫的麻煩累人，且容易出錯。這里整理出一套使用標記 標簽屬性的辦法來傳值， 后臺取值和前臺的綁定都有了大大的簡化。
一、把json對象轉(zhuǎn)成字符串
復(fù)制代碼 代碼如下:
$.extend({
//將json對象轉(zhuǎn)換成字符串 [貌似jquery沒有自帶的這種方法]
toJSONString: function (object) {
if (object == null)
return;
var type = typeof object;
if ('object' == type) {
if (Array == object.constructor) type = 'array';
else if (RegExp == object.constructor) type = 'regexp';
else type = 'object';
}
switch (type) {
case 'undefined':
case 'unknown':
return;
break;
case 'function':
case 'boolean':
case 'regexp':
return object.toString();
break;
case 'number':
return isFinite(object) ? object.toString() : 'null';
break;
case 'string':
return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function () {
var a = arguments[0];
return (a == '\n') ? '\\n' : (a == '\r') ? '\\r' : (a == '\t') ? '\\t' : ""
}) + '"';
break;
case 'object':
if (object === null) return 'null';
var results = [];
for (var property in object) {
var value = $.toJSONString(object[property]);
if (value !== undefined) results.push($.toJSONString(property) + ':' + value);
}
return '{' + results.join(',') + '}';
break;
case 'array':
var results = [];
for (var i = 0; i < object.length; i++) {
var value = $.toJSONString(object[i]);
if (value !== undefined) results.push(value);
}
return '[' + results.join(',') + ']';
break;
}
}
});
二、創(chuàng)建數(shù)據(jù)容器對象 [用來綁定要傳給后臺的前臺控件值]
復(fù)制代碼 代碼如下:
var DataClass = {
create: function () {
return function () {
this.MyInit.apply(this, arguments);//創(chuàng)建對象的構(gòu)造函數(shù) //arguments 參數(shù)集合 系統(tǒng)名稱 不能寫錯
}
}
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//初始化
MyInit: function (url, operation, params) {
this.data = new Object(); //所有數(shù)據(jù)容量
var bdata = new Object();
bdata.url = url; //地址
bdata.operation = operation;//操作
bdata.params = params; //參數(shù)
this.data.BasicData = bdata; //基本數(shù)據(jù)
},
//添加數(shù)據(jù) 如：addValue("obj", "111");
addValue: function (p, obj) {
this.data[p] = obj;
},
//取得 所有標記控件的值 并寫入數(shù)據(jù)
getValueSetData: function (togName) {
var values = Object(); //值的集合
$("[subtag='" + togName + "']").each(function () {
//如果是input 類型 控件
if (this.localName == "input") {
//如果是text 控件
if (this.type == "text" || this.type == "hidden") {
values[this.id] = this.value;
}
else if (this.type == "...") {
}
//......
}
else if (this.localName == "...") {
}
//................
});
this.data[togName] = values;//添加到數(shù)據(jù)集合
},
//取值 如：getValue("BasicData")
getValue: function (p) {
return this.data[p];
},
//獲取或設(shè)置url
getUrl: function (url) {
if (url)
this.data.BasicData["url"] = url;
else
return this.data.BasicData["url"];
}
,
//取值 轉(zhuǎn)成字符串的對象 數(shù)據(jù)
getJsonData: function () {
return $.toJSONString(this.data);
}
}
三、創(chuàng)建綁定前臺數(shù)據(jù)對象 [用來讀取后臺傳過來的值，并綁定到前臺頁面]
復(fù)制代碼 代碼如下:
var MyDataBinder = {
//綁定數(shù)據(jù)到 控件 data：數(shù)據(jù) tag：標簽
Bind: function (data, Tag) {
var MJson = $.parseJSON(data);
//只綁定 標記 了的 標簽
$("[bindtag='" + Tag + "']").each(function () {
if (this.localName == "input") {
if (MJson[this.id]) //如果后臺傳了值
$(this).attr("value", MJson[this.id]);
}
else if (this.localName == "...") {
}
//....
});
}
};
四、使用示例
前臺html：
復(fù)制代碼 代碼如下:
<table>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
<tr>
<td id="td1"><input type="text" id="inp_1" subtag="subtag" bindtag="bind" /></td>
<td id="td2"><input type="text" id="inp_2" subtag="subtag" value="我只是測試一下下" /></td>
<td><input type="text" id="inp_3" subtag="subtag" bindtag="bind" /></td>
</tr>
</table>
前臺js：
復(fù)制代碼 代碼如下:
//====================使用示例======================================
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//將控件數(shù)據(jù)寫入對象 “subtag”為要取 控件 值 的標簽
//-------------------傳前臺值到后臺---------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {
//-------------------綁定后臺值到前臺-----------------
MyDataBinder.Bind(data, "bind"); //"bind" 為 要綁定控件的 標簽
});
后臺：
復(fù)制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//====================取前臺值=============================================
//因為后臺傳過來的是 json對象 轉(zhuǎn)換后的字符串 所以 所有數(shù)據(jù)都 做為一個參數(shù)傳過來了
var values = context.Request.Form[0];
//需要引入程序集System.Web.Extensions.dll
JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
//將 json 對象字符串 轉(zhuǎn)成 Dictionary 對象
Dictionary<string, Dictionary<string, string>> dic = _jsSerializer.Deserialize<Dictionary<string, Dictionary<string, string>>>(values);
//現(xiàn)在 dic 里面就包含了 所有前臺傳過來的值 想怎么用 就怎么用了。
string inp_2 = dic["subtag"]["inp_2"];//這樣就直接取到了前臺 頁面 id為 inp_2 的 控件value 值
//=====================傳值到前臺============================================
Dictionary<string, string> dic2 = new Dictionary<string, string>();
dic2.Add("inp_1", "修改1");//這里只用對應(yīng)控件id 傳值即可
dic2.Add("inp_2", "修改2");
dic2.Add("inp_3", "修改3");
context.Response.Write(_jsSerializer.Serialize(dic2));
}
小伙伴們對使用json實現(xiàn)前后臺傳值是否了解清楚了呢，有問題的話，就給我留言吧
相關(guān)文章
不要認為JSON是種新的應(yīng)用 ，其實JSON就是javascript支持的一種對象直接量。2008-09-09
若使用json作為客戶端和服務(wù)器之間的數(shù)據(jù)交換格式，代替原來的html交換格式。2010-06-06
json.stringify()與json.parse()的區(qū)別以及用處
這篇文章主要介紹了json.stringify()與json.parse()的區(qū)別以及用處,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
下面小編就為大家?guī)硪黄哑胀▽ο筠D(zhuǎn)換成json格式的對象的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
用JSON做數(shù)據(jù)傳輸格式中的一些問題總結(jié)
Json 憑借其自身的優(yōu)勢，在Web數(shù)據(jù)處理方面已經(jīng)占據(jù)了一定的位置，這段時間涉及到用Json做為數(shù)據(jù)傳輸格式的項目有3個，其中有部分頁面就采用了Json 數(shù)據(jù)傳輸格式, 這里我總結(jié)下這段時間采用這種方式的一些問題總結(jié)2011-12-12
淺談JSON中stringify 函數(shù)、toJosn函數(shù)和parse函數(shù)
這篇文章主要介紹了淺談JSON中stringify 函數(shù)、toJosn函數(shù)和parse函數(shù),需要的朋友可以參考下2015-01-01
這篇文章主要介紹了json文件書寫格式規(guī)范。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2021-11-11
JSON.parse()方法轉(zhuǎn)換對象的示例以及注意事項
這篇文章主要介紹了JSON.parse()方法轉(zhuǎn)換對象的示例以及注意事項,我們可以使用 JSON.parse() 方法將數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對象,需要的朋友可以參考下2023-05-05
通常情況下,json的在項目中的應(yīng)用都是在后臺把數(shù)據(jù)傳到前臺,然后前臺再獲取json中的數(shù)據(jù).2012-01-01
nodejs教程 安裝express及配置app.js文件的詳細步驟
express.js是nodejs的一個MVC開發(fā)框架，并且支持jade等多種模板。下面簡單來說說express的安裝和app.js文件的配置，然后在今后的教程中一步一步使用express.js搭建個聊天室2013-05-05