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

我已经想了很多年了。


当前回答

jQuery可以通过$.param来实现

$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"

其他回答

你实际上不需要一个表单来做这个Prototype。使用Object即可。toQueryString功能:

Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

这些答案是非常有用的,但我想添加另一个答案,这可能会帮助你建立完整的URL。 这可以帮助你连接基本url,路径,哈希和参数。

var url = buildUrl('http://mywebsite.com', {
        path: 'about',
        hash: 'contact',
        queryParams: {
            'var1': 'value',
            'var2': 'value2',
            'arr[]' : 'foo'
        }
    });
    console.log(url);

你可以通过npm https://www.npmjs.com/package/build-url下载

演示:

;(function () { 'use strict'; var root = this; var previousBuildUrl = root.buildUrl; var buildUrl = function (url, options) { var queryString = []; var key; var builtUrl; var caseChange; // 'lowerCase' parameter default = false, if (options && options.lowerCase) { caseChange = !!options.lowerCase; } else { caseChange = false; } if (url === null) { builtUrl = ''; } else if (typeof(url) === 'object') { builtUrl = ''; options = url; } else { builtUrl = url; } if(builtUrl && builtUrl[builtUrl.length - 1] === '/') { builtUrl = builtUrl.slice(0, -1); } if (options) { if (options.path) { var localVar = String(options.path).trim(); if (caseChange) { localVar = localVar.toLowerCase(); } if (localVar.indexOf('/') === 0) { builtUrl += localVar; } else { builtUrl += '/' + localVar; } } if (options.queryParams) { for (key in options.queryParams) { if (options.queryParams.hasOwnProperty(key) && options.queryParams[key] !== void 0) { var encodedParam; if (options.disableCSV && Array.isArray(options.queryParams[key]) && options.queryParams[key].length) { for(var i = 0; i < options.queryParams[key].length; i++) { encodedParam = encodeURIComponent(String(options.queryParams[key][i]).trim()); queryString.push(key + '=' + encodedParam); } } else { if (caseChange) { encodedParam = encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase()); } else { encodedParam = encodeURIComponent(String(options.queryParams[key]).trim()); } queryString.push(key + '=' + encodedParam); } } } builtUrl += '?' + queryString.join('&'); } if (options.hash) { if(caseChange) builtUrl += '#' + String(options.hash).trim().toLowerCase(); else builtUrl += '#' + String(options.hash).trim(); } } return builtUrl; }; buildUrl.noConflict = function () { root.buildUrl = previousBuildUrl; return buildUrl; }; if (typeof(exports) !== 'undefined') { if (typeof(module) !== 'undefined' && module.exports) { exports = module.exports = buildUrl; } exports.buildUrl = buildUrl; } else { root.buildUrl = buildUrl; } }).call(this); var url = buildUrl('http://mywebsite.com', { path: 'about', hash: 'contact', queryParams: { 'var1': 'value', 'var2': 'value2', 'arr[]' : 'foo' } }); console.log(url);

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

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

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)