FormDataをAjaxで送信する方法【サンプルコード付き】

1年 ago

夏樹, 風

1 minute

Ajaxを使用する際には、FormDataオブジェクトを使用してフォームデータをシリアライズし、キー/値のペアとしてサーバーに送信することができます。

FormDataオブジェクトを使用する一般的なステップは次のとおりです：

フォームデータオブジェクトを作成します：新しいフォームデータオブジェクトを直接インスタンス化することも、フォーム要素を渡して作成することもできます。

// 创建一个新的FormData对象
var formData = new FormData();

// 通过form元素创建FormData对象
var form = document.getElementById('myForm');
var formData = new FormData(form);

FormDataオブジェクトにデータを追加する際には、append()メソッドを使用してキーと値のペアを追加することができます。

formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');

フォームデータオブジェクトをサーバーに送信するには、Ajaxリクエストのsend（）メソッドにデータパラメーターとしてFormDataオブジェクトを渡すことができます。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.php', true);
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
    } else {
        console.error('Request failed: ' + xhr.status);
    }
};
xhr.send(formData);

上記の手順を使用すると、FormDataオブジェクトを使用してフォームデータをシリアル化してサーバーに送信することができます。

#Ajax #FormData #HTTPリクエスト #JavaScript