将表单转换为查询字符串，Vanilla JavaScript答案

【问题标题】：Convert form into query string, Vanilla JavaScript将表单转换为查询字符串，Vanilla JavaScript
【发布时间】：2019-07-17 11:50:16
【问题描述】：

我正在尝试从我的表单中提取所有数据并将其转换为 queryString，然后发布到端点。

这是我到目前为止所拥有的，但是我无法找到一种快速而干净的方法来将其转换为例如：key=value&key=value。

let data = Array.from(this.querySelectorAll('input:not([type="submit"]), select, textarea')).map(input => {
    let value = '';
    switch(input.tagName) {
        case 'INPUT':
            value = input.value;
            break;
        case 'SELECT':
            value = input[input.selectedIndex].value;
            break;
        case 'TEXTAREA':
            value = input.innerHTML;
            break;
    }

    return {
        key: input.name,
        value: value
    };
});

console.log(data);

// Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');

上面的代码创建了一个对象数组，其中包含键和值。能够使用上面注释掉的一个衬里会很好。

【问题讨论】：

你不需要那个switch。 this.value 适用于所有三种情况。
stackoverflow.com/questions/41431322/…
将.innerHTML 用于<textarea> 是不正确的；只是.value。此外，您可能应该测试 disabled 元素的完整性。
stackoverflow.com/questions/11661187/…
be nice to be able use the one liner -> data.map(({key, value}) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');

标签： javascript

【解决方案1】：

报废你得到的。您应该将输入包装在 <form> 中。这不仅在语义上是正确的，而且还允许您从表单中获取 FormData 对象。查看我的代码：

const form = document.getElementById('my-form');

form.addEventListener('submit', (evt) => {
  evt.preventDefault();
  const formData = new FormData(form);
  const params = new URLSearchParams(formData);
  console.log(params.toString());
});

<form id="my-form">
  <input type="text" name="name" id="name">
  <select id="gender" name="gender">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </select>
  <input type="submit" />
</form>

FormData 对象也可以直接提供给fetch-request 的主体。无需自己构造查询字符串。

您可以从上面的代码中添加或删除不同的输入字段，它仍然可以工作。

【讨论】：

我尝试了 FormData 但它对我不起作用，而且我还收到一条警告说 FormData 需要 0 个参数，但是谢谢，这有效！

【解决方案2】：

您可以使用URLSearchParams 接口将FormData 接口转换为查询字符串

请试试这个例子

const form = document.forms.form;

form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
  event.preventDefault();

  const formData = new FormData(form);
  const queryString = new URLSearchParams(formData).toString();

  console.log(queryString);
}

label, input, select, textarea {
  display: block;
}

<form action="" name="form" id="form">
  <label for="firstName">
    First name
    <input type="text" name="firstName" id="firstName" />
  </label>

  <label for="lastName">
    Last name
    <input type="text" name="lastName" id="lastName" />
  </label>

  <label for="email">
    Email
    <input type="text" name="email" id="email" />
  </label>

  <label for="genre">
    Genre
    <select name="genre" id="genre">
      <option value="female">Female</option>
      <option value="male">Male</option>
    </select>
  </label>

  <label for="bio">
    Bio
    <textarea name="bio" id="bio" cols="30" rows="10"></textarea>
  </label>

  <p>
    <button type="submit">Submit</button>
  </p>
</form>

【讨论】：