如何使用Javascript构建查询字符串

注意:它最近与Chrome和Firefox 非常兼容,但如果您需要使用Microsoft和Apple浏览器,请务必小心,因为兼容性是部分的.

使用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"

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"

不,我不认为标准JavaScript有内置,但Prototype JS有这个功能(当然大多数其他JS框架也有,但我不知道),他们称之为序列化.

我可以推荐Prototype JS,它工作得很好.唯一的缺点我真的注意到它的大小(几百kb)和范围(很多代码为ajax,dom等).因此,如果你只想要一个表单序列化器,那就太过分了,而且严格来说,如果你只想要它的Ajax功能(主要是我用它),那就太过分了.除非你小心,否则你可能会发现它有点过分"神奇"(比如扩展它与Prototype JS函数接触的每个dom元素只是为了找到元素),这使得它在极端情况下变慢.

查询串可以帮助.

所以你可以

const querystring = require('querystring')

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

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

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

您实际上并不需要使用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'