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 協議》，轉載必須註明作者和本文連結