web-dev-qa-db-ja.com

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

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

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

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();
});

for ... ofループなどを使用したこの全体は、少し複雑に思えます。 FormDataをクエリ文字列に変換する簡単な方法はありますか？または、何らかの方法でFormDataを別のエンコーディングで送信できますか？

javascriptxmlhttprequestform-data
9
kleinfreund

RLSearchParams を使用できます

const queryString = new URLSearchParams(new FormData(myForm)).toString()
29
Hans

より簡単な解決策を求めました...
_forループは、コレクションを横断する最も簡単な方法です（imho）。

ただし、 spread operator/syntax（...）

Spread構文を使用すると、複数の引数（関数呼び出しの場合）または複数の要素（配列リテラルの場合）または複数の変数（割り当ての破壊のため）が予想される場所で式を展開できます。

きみの for...ofループは次のように置き換えることができます。

let parameters = [...formData.entries()] // expand the elements from the .entries() iterator into an actual array
                     .map(e => encodeURIComponent(e[0]) + "=" + encodeURIComponent(e[1]))  // transform the elements into encoded key-value-pairs
7
Andreas

JQueryを使用できる場合は、次のようにformオブジェクトで.serialize()関数を呼び出すだけです。

function getQueryString() {
  var str = $( "form" ).serialize();
  console.log(str);
}

$( "#cmdTest" ).on( "click", getQueryString );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select name="list1">
    <option>opt1</option>
    <option>opt2</option>
  </select>
 
  <br>
  <input type="text" name="txt1" value="valWith%Special&Char$">
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
  
<button id="cmdTest">Get queryString</button>

注：また、URLリクエストで使用するためにデータをエンコードします

さようなら、お役に立てば幸いです。

3
Alessandro