前端：form表单转换为Json数据

短命女 2022-03-20 08:56 639阅读 0赞

项目主页

[https://github.com/marioizquierdo/jquery.serializeJSON][https_github.com_marioizquierdo_jquery.serializeJSON]

效果图

![650983-20170208121231557-132387534.png][]

加载使用

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.serializejson.js"></script>

form表单页面代码

<form id="formDemo" class="layui-form">
        <table class="layui-table" lay-even>
            <colgroup>
                <col width="100">
                <col width="200">
                <col>
            </colgroup>
            <tbody>
                <tr>
                    <th>用户名</th>
                    <td id="userName">
                        <div class="layui-form-item layui-input-inline">
                            <input tyep="text" name="userName" class="layui-input">
                        </div>
                    </td>
                </tr>
                
                
                <tr>
                    <th>登录密码</th>
                    <td id="password">
                        <div class="layui-form-item layui-input-inline">
                            <input tyep="text" name="password" class="layui-input">
                        </div>
                    </td>
                </tr>
                
                <tr>
                    <th>用户权限</th>
                    <td id="role">
                        <div class="layui-form-item layui-input-inline">
                          <input type="text" name="role" class="layui-input" readOnly="true" value="管理员">
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>手机号</th>
                    <td id="phone">
                        <div class="layui-form-item layui-input-inline">
                            <input tyep="text" name="phone" class="layui-input">
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>用户备注</th>
                    <td id="nickName">
                        <div class="layui-form-item layui-input-inline">
                            <input tyep="text" name="nickName" class="layui-input">
                        </div>
                    </td>
                </tr>
                
            </tbody>
        </table>
     </form>

序列化

<script type="text/javascript">
        function getUser(){
            console.log($('#formDemo').serializeJSON());
            console.log(JSON.stringify($('#formDemo').serializeJSON()));
            return JSON.stringify($('#formDemo').serializeJSON());
        }
    </script>

$('\#formDemo').serializeJSON()返回的是一个Object体

{userName: "test", password: "test", role: "管理员", phone: "18888888866", nickName: "测试"}

JSON.stringify($('#formDemo').serializeJSON())返回的是JSON字符串

{"userName":"test","password":"test","role":"管理员","phone":"18888888866","nickName":"测试"}

使用Ajax传递给后台使用@RequestBody进行接收

<script type="text/javascript">
        function addUser(){
            var data = getUser();
            $.ajax({
             type: "POST",
             url: "${ctx}/auth/user/create",
             data: data,
             dataType: "json",
             contentType:"application/json",
             success: function(data){
                alert(data.message);
                 if(data.code==0){
                     layer.closeAll();
                     window.location.href="${ctx}/auth/users";
                 }
              }
            });
        }
        
    </script>

若要在JS中获取键值对中的值可以进行如下处理

<script type="text/javascript">
        var data = getUser();
        var obj = eval("("+data+")");
        alert(obj.userName);
    </script>

[https_github.com_marioizquierdo_jquery.serializeJSON]: https://github.com/marioizquierdo/jquery.serializeJSON
[650983-20170208121231557-132387534.png]: /images/20220320/aa996c5c1bf54d9189ceced7ecdf267a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，639人围观）

还没有评论，来说两句吧...

相关阅读

相关 Form表单数据处理

浏览器端的数据采集主要依靠html的form表单来实现，form表单是包含一系列表单元素的区域，表单元素是允许用户在表单中输入信息的元素。常见的表单有文本域，下拉列表，单选框和

叁歲伎倆/ 2024年03月31日 14:42/ 0 赞/ 66 阅读

相关 form表单提交和JSON区别

form表单是“键值对”的数据格式，例如： a=1&b=2&c=3 而json格式则与之不同，如下： {"a":1,"b":2,"c":3}

小咪咪/ 2022年10月29日 07:33/ 0 赞/ 217 阅读

相关 curl basic认证发form表单和Json数据

curl --basic -u -X -H -d `--basic`：指定简单密码校验 `-u`：指定用户名和密码，格式：`username:password

待我称王封你为后i/ 2022年10月24日 01:44/ 0 赞/ 360 阅读

相关 javaWeb 中前端Form表单数据处理(手动拼json)

在前端我们会用到最多的就是form表单提交数据，在form表单中有很多都是自动将数据传到后台，然后通过实体来接受的，但是有的时候我们就是需要在前端就拿到这个Form表单的

我就是我/ 2022年09月21日 14:27/ 0 赞/ 167 阅读

相关前端基础-09-form表单&json数据

前端基础-form表单,json数据 1.form表单常用标签完整的form表单标签 <form action="http://www.baidu

太过爱你忘了你带给我的痛/ 2022年06月05日 05:39/ 0 赞/ 172 阅读

相关 form表单转换为Json数据

<form id="formDemo" class="layui-form"> <table class="layui-table" lay-even>

缺乏、安全感/ 2022年06月01日 01:18/ 0 赞/ 190 阅读

相关 Form表单提交JSON数据

1.定义方法 //定义serializeObject方法，序列化表单 $.fn.serializeObject = function() {

迈不过友情╰/ 2022年04月18日 03:38/ 0 赞/ 724 阅读

相关 Form-Form表单

一、典型表单在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Check

灰太狼/ 2022年03月31日 15:11/ 1 赞/ 622 阅读

相关前端：form表单转换为Json数据

项目主页 [https://github.com/marioizquierdo/jquery.serializeJSON][https_github.com_mario

短命女/ 2022年03月20日 08:56/ 0 赞/ 640 阅读

相关前端ajax以json格式提交form表单，后端接受类型为JSONObject

前端使用ajax提交form表单，后端使用的JSONObject进行jie接收参数 var strdata = $("add").serializeArray();

女爷i/ 2022年03月16日 18:48/ 0 赞/ 599 阅读