Ajax 提交表单数据

form表单准备如下

<form id="form">
    @csrf
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="file" name="file">
    <button type="button" onclick="store()">提交</button>
</form>

不包含文件表单数据

• jquery 的序列化方式

  function store() {
        $.ajax({
            url: '{{route('store')}}',
            data: $('#form').serialize(),
            type:'post',
            success: function (res) {

            }
        })
    }

• js FormData 对象

 function store() {
        var formData = new FormData($('#form')[0])
        $.ajax({
            url: '{{route('store')}}',
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            type:'post',
            success: function (res) {

            }
        })
    }

包含文件表单数据

 function store() {
        var formData = new FormData($('#form')[0])
        $.ajax({
            url: '{{route('store')}}',
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            type:'post',
            success: function (res) {

            }
        })
    }

Form Data 更多操作

• 创建 空 Form Data对象

var formData = new FormData();

• 以 form 表单创建 Form Data对象

// 获取 form 表单 HTMLElement 对象
var elment = document.querySelector("#form")

// jquery 获取 form 表单 HTMLElement 对象
var elment = $("#form")[0]

var formData = new FormData(element);

• 添加数据

formdata.append("k1","v1");

• 获取数据

formdata.get("k1");

• 修改数据

formdata.set("k1","v2");

• 判断是否存在某条数据

if (formdata.has("k1")) {
    // do something
}

• 删除数据

formdata.delete("k1");

• 遍历 FormData 中数据

 for(var k of formData.keys()){
        console.log(formData.get(k))
    }

本作品采用《CC 协议》，转载必须注明作者和本文链接