🔔🔔好消息!好消息!🔔🔔

需求：

在页面上，有个form表单，里面对象是通过for循环后，展示出来的。现在，在修改页面，页面修改数据后，怎么以json格式提交给后台？后台怎么获取？

需求分析后难点：

1. 怎么获取到form表单中每个属性值和value呢？

2. 这些数据怎么以json格式提交呢？

3. 端接口怎么获取到这些数据呢？

4. @RequestBody

解决难道需要用到的技术：
问题1：

使用jQuery的序列化及根据name获取value的。

jQuery序列化：

var formData = $(this).serializeArray();

根据name获取value:

$.each(formData, function(i, field) {
    if (field.name === 'keyword') {
        currentPluginVo[field.name] = field.value;
        groupedFormData.push(currentPluginVo);
        currentPluginVo = {};
    } else {
       currentPluginVo[field.name] = field.value;
    }
});

问题2：

将数据转换成json格式：

JSON.stringify(jsonDataArray)

问题3：

后台接口接收json对象:

@RequestBody

具体代码案例：

HTML页面中JS代码：

<script>

    // 定义一个模拟BTWPluginVo对象的构造函数
    function BTWPluginVo(data) {
        this.siteName = data.siteName;
        this.siteCode = data.siteCode;
        this.description = data.description;
        this.id = data.id;
        
    }


    $('form#tab-7-form').on('submit', function(event) {
        event.preventDefault(); // 阻止默认的表单提交行为
        var formData = $(this).serializeArray();
        var groupedFormData = []; // 用于存储分组后的表单数据
        var currentPluginVo = {};

        $.each(formData, function(i, field) {
            if (field.name === 'keyword') {
                currentPluginVo[field.name] = field.value;
                groupedFormData.push(currentPluginVo);
                currentPluginVo = {};
            } else {
               currentPluginVo[field.name] = field.value;
            }
        });

        // 处理最后一组数据
        if (!$.isEmptyObject(currentPluginVo)) {
            groupedFormData.push(currentPluginVo);
        }

        var jsonDataArray = groupedFormData.map(function(obj) {
            return new BTWPluginVo(obj);
        });

        $.ajax({
            url: "后台提交json接口地址",
            type: 'POST',
            contentType: 'application/json; charset=utf-8', // 设置请求内容类型为JSON
            dataType: 'json',
            data: JSON.stringify(jsonDataArray),
            //data: encodeURI((JSON.stringify(jsonDataArray)),"UTF-8"),
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            },
            beforeSubmit : function (){
                $("#submitQrcodeUpdate").attr("disabled","disabled");
                index = jeesnsDialog.loading();
            },

            success: function(response) {
                // 处理成功的回调
                $("#submitQrcodeUpdate").removeAttr("disabled");
                jeesnsDialog.successTips(response.message);

            },
            error: function(xhr, status, error) {
                // 处理错误的回调
                $("#submitQrcodeUpdate").removeAttr("disabled");
                jeesnsDialog.errorTips(response.message);
            }
        });
    });
</script>

后端接口写法：

@RequestMapping(value = "qrcodeUpdate",method = RequestMethod.POST)
@ResponseBody
public Object qrcodeUpdate(@RequestBody List<BTWPluginVo> btwPluginVos, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
   
    //TODO批量更新操作
    return new ResponseModel(0,"操作成功");
}