json实现前后台的相互传值详解

 更新时间:2015年01月05日 14:27:06   投稿:hebedich  
这篇文章主要介绍了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 < object.length; 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:

复制代码 代码如下:

 <table>
     <tr>
         <th>一</th>
         <th>二</th>
         <th>三</th>
     </tr>
     <tr>
         <td id="td1"><input type="text" id="inp_1" subtag="subtag" bindtag="bind" /></td>
         <td id="td2"><input type="text" id="inp_2" subtag="subtag" value="我只是测试一下下" /></td>
         <td><input type="text" id="inp_3" subtag="subtag" bindtag="bind" /></td>
     </tr>      
 </table>

前台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<string, Dictionary<string, string>> dic = _jsSerializer.Deserialize<Dictionary<string, Dictionary<string, string>>>(values);
    //现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
    string inp_2 = dic["subtag"]["inp_2"];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
    //=====================传值到前台============================================
    Dictionary<string, string> dic2 = new Dictionary<string, string>();
    dic2.Add("inp_1", "修改1");//这里只用对应控件id 传值即可
    dic2.Add("inp_2", "修改2");
    dic2.Add("inp_3", "修改3");
    context.Response.Write(_jsSerializer.Serialize(dic2));
}

小伙伴们对使用json实现前后台传值是否了解清楚了呢,有问题的话,就给我留言吧

相关文章

  • 对比分析json及XML

    对比分析json及XML

    本文是根据自己对json、xml的了解,参考了部分资料,结合网上的一些视频教程总结出来的一篇个人对于json和XML的感悟,以及他们之间在使用的时候的优劣,这里推荐给大家。
    2014-11-11
  • JSON 入门教程基础篇 json入门学习笔记

    JSON 入门教程基础篇 json入门学习笔记

    刚开始接触json的时候感觉有点奇怪的命名,后来使用才发现这么简单而且用好用,扩展性很强,这里就为大家整理一下
    2020-09-09
  • 如何实现json数据可视化详解

    如何实现json数据可视化详解

    最近在工作中开发一个内部功能时碰到的一个需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧
    2016-11-11
  • json解析大全 双引号、键值对不在一起的情况

    json解析大全 双引号、键值对不在一起的情况

    这篇文章主要介绍了json解析大全 双引号、键值对不在一起的情况,需要的朋友可以参考下
    2019-12-12
  • JSON学习笔记

    JSON学习笔记

    JSON我就要来了
    2008-06-06
  • JSON schema配置规范使用教程

    JSON schema配置规范使用教程

    这篇文章主要为大家介绍了JSON schema配置规范使用教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • nodejs教程 安装express及配置app.js文件的详细步骤

    nodejs教程 安装express及配置app.js文件的详细步骤

    express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个聊天室
    2013-05-05
  • 利用NodeJS的子进程(child_process)调用系统命令的方法分享

    利用NodeJS的子进程(child_process)调用系统命令的方法分享

    child_process即子进程可以创建一个系统子进程并执行shell命令,在与系统层面的交互上挺有用处
    2013-06-06
  • 简明json介绍

    简明json介绍

    不要认为JSON是种新的应用 ,其实JSON就是javascript支持的一种对象直接量。
    2008-09-09
  • 半个小时学json(json传递示例)

    半个小时学json(json传递示例)

    这篇文章主要介绍了半个小时学json(json传递示例),主要包括一维数组与二维数组,需要的朋友可以参考下
    2016-12-12

最新评论