想知道JavaScript中是否有任何内置的功能,可以接收表单并返回查询参数,例如:"var1=value&var2=value2&arr[]=foo&arr[]=bar..."
我多年来一直在思考这个问题。
想知道JavaScript中是否有任何内置的功能,可以接收表单并返回查询参数,例如:"var1=value&var2=value2&arr[]=foo&arr[]=bar..."
我多年来一直在思考这个问题。
URLSearchParams API 在所有现代浏览器中都可用。例如:
const params = new URLSearchParams({
var1: "value",
var2: "value2",
arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"
params.append(key, value)
以添加新的搜索参数。 - Mingwei Zhangx=null&y=undefined
- pomberconst url = new URL("https://stackoverflow.com")
),你可以设置它的查询字符串 url.search = new URLSearchParams({foo: "bar"})
或者 url.searchParams.append("foo", "bar")
。 - pmiguelpintoencodeURIComponent()
不同:这里的空格被编码为 +
而不是 %20
。不确定这是否可能是某些服务出现问题的原因。 - Klesun2k20 更新:使用 Josh 的解决方案,搭配 URLSearchParams.toString()。
旧答案:
没有使用 jQuery
var params = {
parameter1: 'value_1',
parameter2: 'value 2',
parameter3: 'value&3'
};
var esc = encodeURIComponent;
var query = Object.keys(params)
.map(k => esc(k) + '=' + esc(params[k]))
.join('&');
对于不支持需要 ES5 的箭头函数语法的浏览器,请将 .map...
行更改为
.map(function(k) {return esc(k) + '=' + esc(params[k]);})
.map()
替换为.map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);})
。 - John Deighanvar params = {
parameter1: 'value1',
parameter2: 'value2',
parameter3: 'value3'
};
var query = $.param(params);
console.log(query);
parameter1=value1¶meter2=value2¶meter3=value3
$.param($('#myform').serializeArray())
。 - Jesse$('#myform').serialize()
- cleaverjQuery.param()
的实现 https://github.com/jquery/jquery/blob/master/src/serialize.js :) - Klemen TusarsomeStr=value1&someObj[a]=5&someObj[b]=6&someArr[]=1&someArr[]=2
。 - Klesun这不是直接回答你的问题,但这里有一个通用函数,可以创建包含查询字符串参数的URL。 这些参数(名称和值)已经被安全地转义以便包含在URL中。
function buildUrl(url, parameters){
var qs = "";
for(var key in parameters) {
var value = parameters[key];
qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
}
if (qs.length > 0){
qs = qs.substring(0, qs.length-1); //chop off last "&"
url = url + "?" + qs;
}
return url;
}
// example:
var url = "http://example.com/";
var parameters = {
name: "George Washington",
dob: "17320222"
};
console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222
new Array
,而实际上你使用它作为一个对象呢?o,O - Umut SirinURL
对象,并将值附加到 searchParameters
中。let stringUrl = "http://www.google.com/search";
let url = new URL(stringUrl);
let params = url.searchParams;
params.append("q", "This is seach query");
console.log(url.toString());
输出将是
http://www.google.com/search?q=This+is+seach+query
利用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"
使用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"
querystring 可以帮助你。
因此,你可以
const querystring = require('querystring')
url += '?' + querystring.stringify(parameters)
不,我认为标准JavaScript没有内置此功能,但是Prototype JS有该功能(其他大多数JS框架也肯定有,但我不知道它们),他们将其称为序列化。
我可以推荐使用Prototype JS,它的工作还算不错。唯一的缺点是它的大小(几百kb)和范围(涉及许多用于ajax、dom等的代码)。因此,如果你只想要一个表单序列化程序,那么它就过度了,严格来说,如果你只需要它的Ajax功能(这主要是我使用它的原因),那么它就过度了。除非你小心,否则你可能会发现它做了太多的“魔法”(例如扩展每个它接触到的dom元素以使用Prototype JS函数),从而在极端情况下变慢。
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('&');
}