前後台的相互傳值如果值太多，寫的麻煩累人，且容易出錯。這裡整理出一套使用標記 標籤屬性的辦法來傳值， 後台取值和前台的綁定都有了大大的簡化。
一、把json物件轉成字串
$.extend({
//將json物件轉換成字串 [看似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' : (n') ? '\n' : (a == 'r') ? '\r' : (a == '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($.toJString(property) ' undefined) results.push($.toJString(property) ':
return '{' results.join(',') '}';
且休息；
case '陣列':
var 結果 = [];
for (var i = 0; i
var value = $.toJSONString(object[i]);
if (value !== undefined) results.push(value);
}
return '[' results.join(',') ']';
且休息；
}
}
});
二、建立資料容器物件 [用於綁定要傳給後台的前台控制項值]
複製程式碼程式碼如下：
var DataClass = {
create: function () {
return unction () {
this.MyInit.apply(this, arguments);//建立物件的建構子 //arguments 參數集合
}
}
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//初始化
MyInit: function (url, operation, params) {
this.data = new Object(); //所有資料容量
var bdata = new Object();
bdata.url = url; //位址
位址
bdata.operation = operation;//操作
bdata.params = params; //參數
this.data.BasicData = bdata; //基本資料
},
//新增資料 如：addValue("obj", "111");
addValue: function (p, obj) {
this.data[p] = obj;
},
//取得 所有標記控制項的值 並寫入資料
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;//新增至資料集合
},
//取值 如：getValue("BasicData")
getValue: function (p) {
return this.data[p];
},
//取得或設定url
getUrl: function (url) {
if (url)
this.data.BasicData["url"] = url;
else
return this.data.BasicData["url"];
}
,
//取值 轉成字串的物件 資料
getJsonData: function () {
return $.toJSONString(this.data);
}
}
三、建立綁定前台資料物件 [用來讀取後台傳過來的值，並綁定到前台頁面]
var MyDataBinder = {
//綁定資料到 控制項 data：資料 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：
前台js：
//====================使用範例============================ ============
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//將控制項資料寫入物件 「subtag」為要取 控制項 值 的標籤
//-------------------傳前台值到後台---------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {
//-------------------綁定後台值到前台-----------------
MyDataBinder.Bind(data, "bind"); //"bind" 為 要綁定控制項的 標籤
});
後台：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//====================取前台值=========================== ====================
//因為後台傳過來的是 json物件 轉換後的字串 所以 所有資料都做為一個參數傳過來了
var values = context.Request.Form[0];
//需要引入組件System.Web.Extensions.dll
JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
//將 json 物件字串 轉換成 Dictionary 物件
Dictionary> dic = _jsSerializer.Deserialize>>(values);
//現在 dic 裡面就包含了 所有前台傳過來的值 想怎麼用 就怎麼用了。
string inp_2 = dic["subtag"]["inp_2"];//這樣就直接取到了前台 頁面 id為 inp_2 的 控件value 值
//=====================傳值到前台======================= =====================
Dictionary dic2 = new Dictionary();
dic2.Add("inp_1", "修改1");//這裡只用對應控制項id 傳值即可
dic2.Add("inp_2", "修改2");
dic2.Add("inp_3", "修改3");
context.Response.Write(_jsSerializer.Serialize(dic2));
}
小夥伴們對使用json實現前後台傳值是否了解清楚了呢，有問題的話，就給我留言吧
