serialize 和serializeArray的区别以及后台的接收方式

最新推荐文章于 2024-09-11 11:00:10 发布

几时雨、

最新推荐文章于 2024-09-11 11:00:10 发布

阅读量743

点赞数

文章标签： easyui jquery

本文链接：https://blog.youkuaiyun.com/weixin_45661193/article/details/120196748

版权

本文详细介绍了在前端表单提交时，serialize()和serializeArray()的区别以及如何处理数据以适应后台接收。serialize()将表单数据转化为URL编码的字符串，不适合JSON提交，而serializeArray()返回的是键值对数组，通过JSON.stringify()转换后可作为JSON数据提交。后台接收时，可以使用实体Bean或Map来接收这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

serialize 和serializeArray的区别以及后台的接收方式

前台form表单代码

<form id="systemForm" action="" method="post" >
        <div class="s_content">
            <div class="s_content_project">
                <dl>
                    <dt>
                        <label class="s_content_project_l"></label>
                        <label class="s_content_project_m">&nbsp;系统信息</label>
                        <label class="s_content_project_r"></label>
                    </dt>
                    <div class="clear"></div>
                    <dd>
                        <div>
                            <table>
                                <input id="D_UUID" name="D_UUID" type="text" hidden="true" value="${DWYHXX.D_UUID}"
                                           class="easyui-validatebox"
                                           style="width:98%;height:20px"
                                           data-options="tipPosition:'bottom'"/>
                                <tr>
                                    <td style="width:1%">地址：
                                    </td>
                                    <td colspan="3" style="text-align: left;width:20%">
                                        <input id="D_URL" name="D_URL" type="text" value="${DWYHXX.D_URL}"
                                               class="easyui-validatebox"
                                               style="width:98%;height:20px"
                                               data-options="tipPosition:'bottom'"/>
                                    </td>
                                </tr>

                                <tr>
                                    <td style="width:1%">编号：
                                    </td>
                                    <td style="text-align: left;width:20%">
                                        <input id="D_NO" name="D_NO" value="${DWYHXX.D_NO}"
                                               width="98%"
                                               showChoice="false"
                                               required="false"
                                               panelHeight="200px">
                                    </td>
                                    <td style="width:1%" >来源系统：</td>
                                    <td style="text-align: left;">
                                        <input id="SYS_NAME" name="SYS_NAME" value="${DWYHXX.SYS_NAME}"
                                                      width="98%"
                                                      showChoice="false"
                                                      required="false">

                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:1%">状态：
                                    </td>
                                    <td style="text-align: left;width:20%">
                                        <select id="D_TYPE" class="easyui-combobox" name="D_TYPE" style="width:80%;">
                                            <option value="0">禁用</option>
                                            <option value="1">启用</option>
                                        </select>
                                    </td>
                                    <td style="width:1%" >创建日期：</td>
                                    <td style="text-align: left;width:98%;height:20px">
                                        <input id="CREATE_DATE" name="CREATE_DATE" type="text" value="${DWYHXX.CREATE_DATE}>"
                                               class="easyui-datebox"
                                               style="width:98%;height:20px"
                                               data-options="required:true,tipPosition:'bottom'"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:1%;height:30px">备注信息</td>
                                    <td colspan="3" style="text-align: left">
                                        <script id="D_COMMENTS" type="text/plain"
                                                name = "D_COMMENTS"
                                                style="width:100%;height:100px;">
                                        </script>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </form>

使用serialize()实例化表单提交，代码如下

 var formObject = {};
      var data = $("#systemForm").serialize();
      alert(data);
        $.ajax({
            async: true,
            cache: false,
            type: 'POST',
            url: 'DwyhxxController.do?update',
            //使用serialize序列化就不能用json提交
            //contentType: "application/json",
            data: data,
            success:function (data) {
                data = JSON.parse(data);
                if (false == data.success) {
                    W.$.dialog.alert(data.msg);
                }else {
                    W.$.dialog.alert(data.msg);
                }
            },
            error:function (data) {
                W.$.dialog("修改失败");
            }
        });
    }

可以看看到serialize()方法是将表单封装成了带&拼接的字符串，所以我们在提交的时候不能以json格式提交
在这里插入图片描述
后台接收可以用实体bean接收，也可以使用单个参数接收，但是的注意参数名必须一致如我这里用参数接收然后放进map中，因为我没有写bean实体，这里小伙伴写了实体的可以直接用@RequestBody 接收

使用serializeArray()实例化

       
        var formArray =$("#systemForm").serializeArray();
        var formObject = {};
        $.each(formArray,function(i,item){
            formObject[item.name] = item.value;
        });
        $.ajax({
            async: true,
            cache: false,
            type: 'POST',
            url: 'DwyhxxController.do?update',
            contentType: "application/json",
            data: JSON.stringify(formObject),
            success:function (data) {
                data = JSON.parse(data);
                if (false == data.success) {
                    W.$.dialog.alert(data.msg);
                }else {
                    W.$.dialog.alert(data.msg);
                }
            },
            error:function (data) {
                W.$.dialog("修改失败");
            }
        });

可以看到serializeArray将实例化成了对象
在这里插入图片描述
我们再使用JSON.stringify()转换成json就变成了数组

显然我们要将数据传入后台还需要处理一下

var formArray =$("#systemForm").serializeArray();
        var formObject = {};
        $.each(formArray,function(i,item){
            formObject[item.name] = item.value;
        });