您好,欢迎访问一九零五行业门户网

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' : (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);//创建对象的构造函数  //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实现前后台传值是否了解清楚了呢,有问题的话,就给我留言吧
其它类似信息

推荐信息