一、把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     //获取或设置url
53     getUrl: function (url) {
54                 if (url)
55                     this.data.BasicData["url"] = url;
56                 else
57                     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         }

前台和后台的相互传值

目录

一、把json对象转成字符串

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

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

四、使用示例