Detailed explanation of mutual value transfer between front and backend using json_json

If there are too many values ​​​​for mutual value transfer between the front and backend, writing will be cumbersome, tiring, and error-prone. Here is a set of ways to use mark tag attributes to pass values. The backend value acquisition and frontend binding have been greatly simplified.

1. Convert json object into string

Copy code The code is as follows:

$.extend({
//Convert json object into string [It seems that jquery does not have this method]
          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                          var value = $.toJSONString(object[i]);
                         if (value !== undefined) results.push(value);
                     }
                     return '[' results.join(',') ']';
                     break;
             }
         }
     });

二、创建数据容器对象 [用来绑定要传给后台的前台控件值]

复制代码 代码如下:

var DataClass = {
Create: function () {
Return function () {
This.myinit.apply (this, arguments); // The constructor of the creation object // Arguments's parameter collection system name cannot be written wrong
                 }
            }
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//Initialization
MyInit: function (url, operation, params) {
This.data = new Object(); //All data capacity
              var bdata = new Object();
                      bdata.url = url;                        bdata.operation = operation;//Operation
                         bdata.params = params; This.data.BasicData = bdata; //Basic data
             },
//Add data such as: addValue("obj", "111");
       addValue: function (p, obj) {
This.data[p] = obj;
},
//Get the values ​​of all mark controls and write data
GetValueSetData: function (togName) {
                   var values ​​= Object(); // Collection of values ​​
                         $("[subtag='" togName "']").each(function () {
//If it is an input type control
If (this.localName == "input") {
//If it is a text control
If (this.type == "text" || this.type == "hidden") {
values[this.id] = this.value;
                                                                                                       }                              else if (this.type == "...") {
                                                                                                       }                                                                                                                                         }
                            else if (this.localName == "...") {
                    }
                                                                                             });
This.data[togName] = values;//Add to data collection
             },
//Value such as: getValue("BasicData")
GetValue: function (p) {
                     return this.data[p];
             },
//Get or set url
GetUrl: function (url) {
If (url)
This.data.BasicData["url"] = url;
                 else
                              return this.data.BasicData["url"];
            }
,
//Convert the value into a string object data
GetJsonData: function () {
            return $.toJSONString(this.data);
}
}

3. Create a bound front-end data object [used to read the value passed from the background and bind it to the front-end page]

Copy code The code is as follows:

var MyDataBinder = {
//Bind data to the control data: data tag: tag
Bind: function (data, Tag) {
         var MJson = $.parseJSON(data);
//Only bind marked tags
           $("[bindtag='" Tag "']").each(function () {
If (this.localName == "input") {
                              if (MJson[this.id]) //If the value is passed in the background
$(this).attr("value", MJson[this.id]);
            }
               else if (this.localName == "...") {
            }
                  //....
        });
}
};

4. Usage examples

Front-end html:

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                       

           
            
                                                                                                                                                                                                                                                                                                     



Front-end js:

Copy code

The code is as follows:

//====================Usage example========================== ============
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//Write the control data into the object "subtag" is the tag to get the control value
//------------------Transfer the front-end value to the back-end---------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {
//-------------------Bind the background value to the foreground-----------------
MyDataBinder.Bind(data, "bind"); //"bind" is the label
of the control to be bound });

Backstage:

Copy code The code is as follows:

public void ProcessRequest(HttpContext context)
{
Context.Response.ContentType = "text/plain";
//====================Get the foreground value========================== ====================
//Because what is passed in the background is the converted string of json object, so all the data is passed as a parameter
var values ​​= context.Request.Form[0];
//Need to introduce assembly System.Web.Extensions.dll
JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
//Convert json object string into Dictionary object
Dictionary> dic = _jsSerializer.Deserialize>>(values);
//Now dic contains all the values ​​passed from the front desk, you can use them however you want.
String inp_2 = dic["subtag"]["inp_2"];//In this way, the control value value with the id of inp_2 on the front page is directly obtained
//====================== Pass the value to the front desk======================== =====================
Dictionary dic2 = new Dictionary();
dic2.Add("inp_1", "Modify 1");//Here, just use the corresponding control id to pass the value
dic2.Add("inp_2", "Modify 2");
dic2.Add("inp_3", "Modify 3");
Context.Response.Write(_jsSerializer.Serialize(dic2));
}

Do you guys have a clear understanding of using json to realize front-end and back-end value transfer? If you have any questions, please leave me a message