目录
一、把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 }