只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”
我已经想了很多年了。
只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”
我已经想了很多年了。
当前回答
如果您不想使用库,这应该涵盖大多数/所有相同的表单元素类型。
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('&');
}
其他回答
Querystring可以提供帮助。
所以,你可以
const querystring = require('querystring')
url += '?' + querystring.stringify(parameters)
这些答案是非常有用的,但我想添加另一个答案,这可能会帮助你建立完整的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('&');
}
对于那些喜欢jQuery的人来说,你可以使用表单插件:http://plugins.jquery.com/project/form,它包含一个formSerialize方法。
现在回答你的问题可能太迟了。 我有同样的问题,我不喜欢不断追加字符串创建URL。所以,我开始使用$。Param techhouse解释道。 我还找到了一个URI.js库,可以轻松地为您创建url。这里有几个例子可以帮助你: 这是其中之一:
var uri = new URI("?hello=world");
uri.setSearch("hello", "mars"); // returns the URI instance for chaining
// uri == "?hello=mars"
uri.setSearch({ foo: "bar", goodbye : ["world", "mars"] });
// uri == "?hello=mars&foo=bar&goodbye=world&goodbye=mars"
uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&foo=bar&goodbye=sun"
// CAUTION: beware of arrays, the following are not quite the same
// If you're dealing with PHP, you probably want the latter…
uri.setSearch("foo", ["bar", "baz"]);
uri.setSearch("foo[]", ["bar", "baz"]);`