jQueryのajax送信するデータを１行で取得する

jQueryでフォームデータを送信する時どうやってデータを集めていますか？
input属性を指定して一つずつ集めているならFormDataを使って1行になるかもしれません。

before

$('input').on('change', (e) => {
    let data = {};
    data[$('input').attr('name')] = $('input').val();
    // ...dataを集める処理
    // ajaxに投げる処理
}

１行コード！

$('input').on('change', (e) => {
    $form = $(e.target).parents('form');
    const data = new FormData($form.get()[0]);
    // ajaxに投げる処理
}

FormDataを使う際のTips

中身を知りたい

// これで確認可能
console.log(...data.entries());

// 単純なconsole.log()だとわからない。
console.log(data);
>>>
FormData {}
  [[Prototype]]: FormData
    append: ƒ append()
    delete: ƒ delete()
    entries: ƒ entries()
    forEach: ƒ forEach()
    get: ƒ ()
    getAll: ƒ getAll()
    has: ƒ has()
    keys: ƒ keys()
    set: ƒ ()
    values: ƒ values()
    constructor: ƒ FormData()
    Symbol(Symbol.iterator): ƒ entries()
    Symbol(Symbol.toStringTag): "FormData"
    [[Prototype]]: Object

画像を送信したい

ajaxのパラメーターを追加する必要があります。
processData: クエリ文字列に変換するか
contentType: requestヘッダーのcontent-type、デフォルトで"application/x-www-form-urlencoded"

$.ajax({
    type: type,
    url: url,
    data: data,
    // 追加
    processData: false,
    contentType: false,
})

fileだけ上げたい

let form = new FormData();
form.append("file", input.files[0]);
$.ajax({
    data: form
    processData: false,
    contentType: false,
    // ....
})

putやdeleteが使えない

これはcontent-typeがapplication/x-www-form-urlencodedの特性上、putやdeleteのHTTPメソッドが使えない。
*もしかしたら送れる方法があるかも？