目录

一、把json对象转成字符串

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

三、创建绑定前台数据对象 [用来读取后台传过来的值，并绑定到前台页面]

四、使用示例

前后台的相互传值如果值太多，写的麻烦累人，且容易出错。这里整理出一套使用标记 标签属性的办法来传值， 后台取值和前台的绑定都有了大大的简化。

一、把json对象转成字符串

 1    $.extend({ 2             //将json对象转换成字符串   [貌似jquery没有自带的这种方法] 3             toJSONString: function (object) { 4                 if (object == null) 5                     return; 6                 var type = typeof object; 7                 if ('object' == type) { 8                     if (Array == object.constructor) type = 'array'; 9                     else if (RegExp == object.constructor) type = 'regexp';10                     else type = 'object';11                 }12                 switch (type) {13                     case 'undefined':14                     case 'unknown':15                         return;16                         break;17                     case 'function':18                     case 'boolean':19                     case 'regexp':20                         return object.toString();21                         break;22                     case 'number':23                         return isFinite(object) ? object.toString() : 'null';24                         break;25                     case 'string':26                         return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function () {27                             var a = arguments[0];28                             return (a == '\n') ? '\\n' : (a == '\r') ? '\\r' : (a == '\t') ? '\\t' : ""29                         }) + '"';30                         break;31                     case 'object':32                         if (object === null) return 'null';33                         var results = [];34                         for (var property in object) {35                             var value = $.toJSONString(object[property]);36                             if (value !== undefined) results.push($.toJSONString(property) + ':' + value);37                         }38                         return '{' + results.join(',') + '}';39                         break;40                     case 'array':41                         var results = [];42                         for (var i = 0; i < object.length; i++) {43                             var value = $.toJSONString(object[i]);44                             if (value !== undefined) results.push(value);45                         }46                         return '[' + results.join(',') + ']';47                         break;48                 }49             }50         });

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

 1 var DataClass = { 2     create: function () { 3                 return function () { 4                     this.MyInit.apply(this, arguments);//创建对象的构造函数  //arguments 参数集合  系统名称 不能写错 5                 } 6             } 7 } 8 var MyDataPack = DataClass.create(); 9 MyDataPack.prototype = {10     //初始化11     MyInit: function (url, operation, params) {12 13                 this.data = new Object();   //所有数据容量14 15                 var bdata = new Object();16                 bdata.url = url;            //地址17                 bdata.operation = operation;//操作18                 bdata.params = params;      //参数19 20                 this.data.BasicData = bdata; //基本数据21             },22     //添加数据 如：addValue("obj", "111");23     addValue: function (p, obj) {24         this.data[p] = obj;25     },26     //取得 所有标记控件的值 并写入数据27     getValueSetData: function (togName) {28                 var values = Object(); //值的集合29                 $("[subtag='" + togName + "']").each(function () {30                     //如果是input 类型 控件31                     if (this.localName == "input") {32                         //如果是text 控件33                         if (this.type == "text" || this.type == "hidden") {34                             values[this.id] = this.value;35                         }36                         else if (this.type == "...") {37 38                         }39                         //......40                     }41                     else if (this.localName == "...") {42 43                     }44                     //................45                 });46                 this.data[togName] = values;//添加到数据集合47             },48     //取值 如：getValue("BasicData")49     getValue: function (p) {50                 return this.data[p];51             },52     //获取或设置url53     getUrl: function (url) {54                 if (url)55                     this.data.BasicData["url"] = url;56                 else57                     return this.data.BasicData["url"];58             }59     ,60     //取值 转成字符串的对象 数据61     getJsonData: function () {62         return $.toJSONString(this.data);63     }64 }

三、创建绑定前台数据对象 [用来读取后台传过来的值，并绑定到前台页面]

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：

 1 <table> 2     <tr> 3         <th>一</th> 4         <th>二</th> 5         <th>三</th> 6     </tr> 7     <tr> 8         <td id="td1"><input type="text" id="inp_1" subtag="subtag" bindtag="bind" /></td> 9         <td id="td2"><input type="text" id="inp_2" subtag="subtag" value="我只是测试一下下" /></td>10         <td><input type="text" id="inp_3" subtag="subtag" bindtag="bind" /></td>11     </tr>       12 </table>

前台js：

1 //====================使用示例======================================2 var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");3 MyDataPack.getValueSetData("subtag");//将控件数据写入对象   “subtag”为要取 控件 值 的标签4 //-------------------传前台值到后台---------------5 $.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {6     //-------------------绑定后台值到前台-----------------7     MyDataBinder.Bind(data, "bind");  //"bind" 为 要绑定控件的 标签8 });

后台：

 1         public void ProcessRequest(HttpContext context) 2         { 3             context.Response.ContentType = "text/plain"; 4             //====================取前台值============================================= 5             //因为后台传过来的是 json对象 转换后的字符串  所以 所有数据都 做为一个参数传过来了 6             var values = context.Request.Form[0]; 7             //需要引入程序集System.Web.Extensions.dll 8             JavaScriptSerializer _jsSerializer = new JavaScriptSerializer(); 9             //将 json 对象字符串  转成 Dictionary 对象10             Dictionary<string, Dictionary<string, string>> dic = _jsSerializer.Deserialize<Dictionary<string, Dictionary<string, string>>>(values);11 12             //现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。13             string inp_2 = dic["subtag"]["inp_2"];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值14 15 16 17             //=====================传值到前台============================================18             Dictionary<string, string> dic2 = new Dictionary<string, string>();19             dic2.Add("inp_1", "修改1");//这里只用对应控件id 传值即可20             dic2.Add("inp_2", "修改2");21             dic2.Add("inp_3", "修改3");22             context.Response.Write(_jsSerializer.Serialize(dic2));23         }