只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”

我已经想了很多年了。


当前回答

ES2017 (ES8)

利用object .entries(),它返回对象的[key, value]对数组。例如,对于{a: 1, b: 2},它将返回[['a', 1], ['b', 2]]。只有IE不支持(将来也不会)。

代码:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

例子:

buildURLQuery({name: 'John', gender: 'male'});

结果:

"name=John&gender=male"

其他回答

现在你可以用FormData和URLSearchParams做到这一点,而不需要循环任何东西。

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

不过,旧的浏览器将需要一个填充。

如果您不想使用库,这应该涵盖大多数/所有相同的表单元素类型。

function serialize(form) {
  if (!form || !form.elements) return;

  var serial = [], i, j, first;
  var add = function (name, value) {
    serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
  }

  var elems = form.elements;
  for (i = 0; i < elems.length; i += 1, first = false) {
    if (elems[i].name.length > 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j < elems[i].options.length; j += 1)
            if (elems[i].options[j].selected) {
              add(elems[i].name, elems[i].options[j].value);
              if (first) break; /* stop searching for select-one */
            }
          break;
        case 'checkbox':
        case 'radio': if (!elems[i].checked) break; /* else continue */
        default: add(elems[i].name, elems[i].value); break;
      }
    }
  }

  return serial.join('&');
}

如果你正在使用jQuery,你可能想要查看jQuery.param() http://api.jquery.com/jQuery.param/

例子:

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
var query = $.param(params);
console.log(query);

这将打印出:

parameter1=value1&parameter2=value2&parameter3=value3

ES2017 (ES8)

利用object .entries(),它返回对象的[key, value]对数组。例如,对于{a: 1, b: 2},它将返回[['a', 1], ['b', 2]]。只有IE不支持(将来也不会)。

代码:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

例子:

buildURLQuery({name: 'John', gender: 'male'});

结果:

"name=John&gender=male"

Querystring可以提供帮助。

所以,你可以

const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)