Question

我正在通过XMLHttpRequest发送一个POST请求，并将数据输入到HTML表单中。不受JavaScript干扰的表单将提交其编码为application/x-www-form-urlencoded的数据。

使用XMLHttpRequest，我想通过FormData API发送数据，因为它将数据视为编码为multipart/form-data，因此无效。因此，我需要将数据作为正确转义的查询字符串写入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();
});

现在，for ... of循环等整个事情看起来有点复杂。有没有更简单的方法将FormData转换为查询字符串？或者我可以以某种方式使用不同的编码发送FormData？

Answer 1

您可以使用URLSearchParams

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

Answer 2

您已经要求更简单的解决方案......
for循环是遍历集合的最简单方法 - imho。

但如果您使用spread operator/syntax (...)

，则版本较短

扩展语法允许在其中的位置扩展表达式多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）预期。

然后可以将您的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

Answer 3

如果您可以使用JQuery，则只需在.serialize()对象上调用form函数，如下所示：

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请求中使用它的数据进行编码

我希望它可以帮助你，再见。

将FormData转换为查询字符串的更简单方法

3 个答案: