json實作前後台的相互傳值詳解_json

前後台的相互傳值如果值太多，寫的麻煩累人，且容易出錯。這裡整理出一套使用標記 標籤屬性的辦法來傳值， 後台取值和前台的綁定都有了大大的簡化。

一、把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實現前後台傳值是否了解清楚了呢，有問題的話，就給我留言吧