表单参数过多，切带有文件，如何使用FormData()实现表单数据的序列化，后台如何接受并使用JSON格式数据转换对象

最新推荐文章于 2024-04-02 16:10:15 发布

IT小管

最新推荐文章于 2024-04-02 16:10:15 发布

阅读量429

点赞数 1

文章标签： java spring json javascript jquery

本文链接：https://blog.csdn.net/jinyang_sky/article/details/103741701

版权

使用背景：

当使用AJAX发送表单数据，且表单数据较多的情况下，如何使用JSON来转换成对象并取值

页面代码（表单部分）：

<form id="ff" method="post" enctype="multipart/form-data">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="bookname" style="width:50%"
                       data-options="label:'书籍名称:',required:true" id="book_name">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="isbn" style="width:50%"
                       data-options="label:'ISBN:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="price" style="width:50%"
                       data-options="label:'单价:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="count" style="width:50%"
                       data-options="label:'数量:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="gropu_price" style="width:50%"
                       data-options="label:'团购价:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="edition" style="width:50%" data-options="label:'版次:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="royalty" style="width:50%" data-options="label:'册数:',required:true">
            </div> 
        </form>

AJAX部分请求代码:

function supplierExamine() {
			//将表单数据序列化
            let jh = $('#ff').serializeArray();
            //将数据转换成JSON格式
            let idata = JSON.stringify(jh);
            //获取图片
            let form_data = $('#photo')[0].files[0];
            let formData = new FormData();
            formData.append("form_data", form_data);
            formData.append("idata", idata);
            $.ajax({
                url: '/manager/supplierExamine/upload',
                method: 'post',
                dataType: 'json',
                data: formData,
                contentType: false,
                processData: false,
                async: false,
                cache: false,
                success: function (result) {
                    console.log("Ok");
                },
                error: function (obj) {
                    console.log("fail");
                }
            });
        }

实体类（用于JSON转JAVA对象，便于取值）：

@Data //等同于 所有属性的get set 方法
@AllArgsConstructor //等全参构造
@NoArgsConstructor //等无参构造  都需要使用lombok 
public class JsonFormat extends JSON {
    private String name;
    private String value;
}

后台处理代码：

@RestController
@RequestMapping("/supplierExamine")
public class SupplierExamineController {
    //    @RequestParam("book_name") String book_name,
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public ActionResult upload(
            @RequestParam("idata") String idata,
            @RequestParam("form_data") MultipartFile form_data,
            HttpSession session) {
        //获取文件名  其他需要获取自己补充
        String filename = form_data.getOriginalFilename();
        //将接收到的字符串转换成 list集合 泛形 为实体类  JsonFormat
        List<JsonFormat> list = (List<JsonFormat>) JSON.parse(idata);
        //将json格式的数据进行对象化
        JsonFormat jsonFormat = JSONObject.toJavaObject(list.get(0), JsonFormat.class);
        //获取对象的key 和  value
        System.out.println(jsonFormat.getName() + jsonFormat.getValue());
        return ActionResult.success();
    }
}