原 js页面传值参数打包类

代码:

  var PageState = {
    MakeParams: function (valueState) {
        var params ={};
        var controlState={};
        //获取控件中的值
        var inputs = document.getElementsByClassName("controlKeep").getElementsByTagName("input");
        var selects = document.getElementsByClassName("controlKeep").getElementsByTagName("select");
        //制作json字符串
        for (var i = 0; i < inputs.length; i++) {
            if ($("#" + inputs[i].id).attr("type") == "text" || $("#" + inputs[i].id).attr("type") == "hidden") {
                controlState[inputs[i].id]=$("#" + inputs[i].id).val()
            }
            else if ($("#" + inputs[i].id).prop("type") == "checkbox") {
                if ($("#" + inputs[i].id).prop("checked") == true) {
                    param += "\"" + inputs[i].id + "\"" + ":" + "\"" + 1 + "\",";
                    controlState[inputs[i].id]=1;
                }
                else {  controlState[inputs[i].id]=-1;  }
            }
        }
        for (var j = 0; j < selects.length; j++) {
            controlState[selects[j].id]=selects[j].value;
        }
        params.controlState=controlState;
        params={
            "valueState":valueState
        }
        //返回json
        return JSON.stringify(params) ;
    },
    DecrizeParams: function (strJson) {
        var params =JSON.parse(strJson);
        for (var key in params.controlState) {
            var value=params[key]
            var obj = document.getElementById(key);
            //input类型值填充
            if (obj.nodeName.toLowerCase() == "input") {

                if (type = "text" || type == "hidden") {
                    $("#" + key).val(value);
                }
                if (type == "checkbox") {
                    if (value > 0)      //正数代表选择
                    { $("#" + key).prop("checked", true); }
                    else
                    { $("#" + key).prop("checked", false); }
                }
            }
            //select类型值填充
            if (obj.nodeName.toLowerCase() == "select") {
                var selectObj = document.getElementById(key);
                for (i = 0; i < selectObj.options.length; i++) {
                    var curOptObj = selectObj.options[i];
                    var value = curOptObj.value;
                    if (value == value) {
                        curOptObj.selected = true;
                    }
                }
            }

        }
        return params.valueState
     }
};

发送

     var parames= GoAndBackUrl.MakeParams({a:12,b:123});

解析

     var obj=backMsg.DecrizeParams();

这里是后台写入隐藏字段,页面load的时候获取字段解析,填充。

    这段代码只是div中的input和select两种控件,使用controlKeep标记,则可以搜集到controlstate这种,也可能存在js变量,可以组合成参数传入。

    读取的时候拿到数据调用DecrizeParams,返回的js变量的结合。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏卡少编程之旅

四个Vue的写法优化技巧

36660
来自专栏Golang语言社区

【Go 语言社区】在golang里实现类似try catch 的异常处理机制

此文介绍的并非 使用panic/recover. 因为实际使用中不建议使用panic/recover. 但try catch finally 的编程方式 还是...

38460
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

269100
来自专栏拂晓风起

jQuery中this与$(this)的区别

12820
来自专栏彭湖湾的编程世界

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组...

310110
来自专栏LIN_ZONE

Vue.js——60分钟快速入门(转载) Vue.js介绍声明该文是转载的,欢迎转载,支持尊重版权,原文作者:keepfool,原文地址:http://www.cnblogs.com/keepfo

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于...

12620
来自专栏GreenLeaves

Vue.js系列之三模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

245100
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

16840
来自专栏超然的博客

HTML5 data-* 自定义属性

  在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用dat...

14320
来自专栏web前端教室

web前端零基础课-1012上周总结

类组件中的方法内部不绑定this,在方法内部使用this,需要用bind(this)传入

10620

扫码关注云+社区

领取腾讯云代金券