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


Posted in Javascript onJanuary 05, 2015

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

一、把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实现前后台传值是否了解清楚了呢,有问题的话,就给我留言吧

Javascript 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue中轮训器的使用
Jan 27 Javascript
jQuery中eq()方法用法实例
Jan 05 #Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 #Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
jQuery中addClass()方法用法实例
Jan 05 #Javascript
js Calender控件使用详解
Jan 05 #Javascript
js的回调函数详解
Jan 05 #Javascript
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python字符编码判断方法分析
2016/07/01 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
社区包粽子活动方案
2014/01/21 职场文书
旅游个人求职信范文
2014/01/30 职场文书
双拥工作宣传标语
2014/06/26 职场文书
2015新年寄语大全
2014/12/08 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers