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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
script标签属性用type还是language
Jan 21 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
js html实现计算器功能
Nov 13 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
详解Vue调用手机相机和相册以及上传
May 05 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
asp.net和php的区别点总结
2019/10/10 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
JS将unicode码转中文方法
2017/05/08 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python根据路径导入模块的方法
2014/09/30 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
租车协议书范本
2014/04/22 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Go 语言结构实例分析
2021/07/04 Golang
mysql脏页是什么
2021/07/26 MySQL
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers