FormDataをクエリ文字列に変換する簡単な方法 質問する

HTML フォームに入力されたデータを使用して、 経由で POST リクエストを送信していますXMLHttpRequest。JavaScript の干渉がないフォームは、 としてエンコードされたデータを送信しますapplication/x-www-form-urlencoded。

XMLHttpRequest では、 のデータをFormDataAPI 経由で送信したいのですが、データが としてエンコードされているかのように扱われるため、機能しませんmultipart/form-data。そのため、 の send メソッドに、適切にエスケープされたクエリ文字列としてデータを書き込む必要がありますXMLHttpRequest。

addEntryForm.addEventListener('submit', function(event) {
    // Gather form data
    var formData = new FormData(this);
    // Array to store the stringified and encoded key-value-pairs.
    var parameters = []
    for (var pair of formData.entries()) {
        parameters.push(
            encodeURIComponent(pair[0]) + '=' +
            encodeURIComponent(pair[1])
        );
    }

    var httpRequest = new XMLHttpRequest();
    httpRequest.open(form.method, form.action);

    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                console.log('Successfully submitted the request');
            } else {
                console.log('Error while submitting the request');
            }
        }
    };

    httpRequest.send(parameters.join('&'));

    // Prevent submitting the form via regular request
    event.preventDefault();
});