zoukankan      html  css  js  c++  java
  • jquery序列化form表单

    在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化。

    jquery提供的serialize方法能够实现。

    $("#searchForm").serialize();

    但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

    例如以下代码:

        <form id="searchForm">
            <input name="id" value="123"/>
            <input name="cx" value="lklj"/>
        </form>
        <script type="text/javascript">
            console.info($("#searchForm").serialize());
        </script>

    输出结果是:id=123&cx=lklj

    serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象)。

    所以就需要提供一个能将form转化为对象的方法。参考自:http://www.cnblogs.com/yeminglong/p/3799282.html

    (function(window, $) {
        $.fn.serializeJson = function() {
            var serializeObj = {};
            var array = this.serializeArray();
            var str = this.serialize();
            $(array).each(
                    function() {
                        if (serializeObj[this.name]) {
                            if ($.isArray(serializeObj[this.name])) {
                                serializeObj[this.name].push(this.value);
                            } else {
                                serializeObj[this.name] = [
                                        serializeObj[this.name], this.value ];
                            }
                        } else {
                            serializeObj[this.name] = this.value;
                        }
                    });
            return serializeObj;
        };
    })(window, jQuery);

    调用插件:

    console.info($("#searchForm").serializeJson());

    输出结果:Object {id: "123", cx: "lklj"}

    文章可能没有多深或多新颖的知识点,但都是自己亲手实践,记录自己感受与收获。



  • 相关阅读:
    vue路由学习
    vue组件学习
    Vue常用特性
    Vue入门常用指令
    ES6新增语法
    如何搭建一个vue项目(完整步骤)
    OA办公系统
    java有序数组的有序交集
    javascript输出数据到文件
    node js 实现文件上传与反显
  • 原文地址:https://www.cnblogs.com/dengding/p/6437369.html
Copyright © 2011-2022 走看看