form表单序列化和ajax提交表单

页面元素

<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<form id="frm">
        <div class="form-group">
            <label for="housename">housename</label>
            <input type="text" class="form-control" id="housename" name="houseName" placeholder="housename">
        </div>
        <div class="form-group">
            <label for="InputFile">图片</label>
            <input type="file" id="InputFile" onchange="selImage(this)">
            <img width="240px" height="200px" id="img" hidden><br>
            <input type="text" id="housePic" name="housePic" placeholder="图片" readonly>
        </div>
        <div class="form-group">
            <label for="house_layout">户型</label>
            <input type="text" class="form-control" id="house_layout" name="houseLayout" placeholder="house_layout">
        </div>
        <div class="form-group">
            <label for="house_type">类型</label>
            <select class="form-control" id="house_type" name="houseType">
                <option value="1">合租</option>
                <option value="2">单租</option>
            </select>
        </div>
        <button type="button" class="btn btn-light" onclick="fnSubmit()">Submit</button>
</form>

1.序列化表单数据

借助jQuery的serialize()函数
serialize() 函数的好处：可以一次性获取到表单中的所有的数据。

js:

function fnSubmit() {
    //序列化为字符串(键值格式)
    let formData = $("#frm").serialize();
    console.log(formData);
    $.ajax({
        type: "post",
        url: "http://localhost:8088/Exercises02_Renting/house/add",
        data: formData,
        dataType: "json",
        success: function (res) {
            console.log(res);
            layer.msg(res.msg, { icon: 6, time: 2000 });
            setTimeout(function () {
                window.location.href = "listlist.html"
            }, 2000)
        }
    });
}

2.后端接收

@ResponseBody
@RequestMapping("/add")
public ResultVO add(House house) {
    //houseName=&housePic=&houseLayout=&houseType=1
    //house中属性对应K-V中的键
    boolean add = houseService.add(house);
    return new ResultVO(1000,"添加成功",null);
}

tips

1.在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！

2.使用该方法得到的结果是一个查询字符串结构：name=value&name=valuej。

3.该方法是 jQuery 封装的，使用时必须引入 jQuery

4.该方法能够获取 隐藏域的值

5.该方法不能得到禁用状态的值

6.该方法不能得到文件域中的文件信息，所以不能完成文件上传

关于serialize()和serializeArray()