只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”
我已经想了很多年了。
只是想知道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"
其他回答
你实际上不需要一个表单来做这个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'
如果你正在使用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¶meter2=value2¶meter3=value3
这并没有直接回答您的问题,但这里有一个通用函数,它将创建一个包含查询字符串参数的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
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"
可能有点多余,但我找到的最干净的方法是建立在这里的一些答案上:
const params: {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
const esc = encodeURIComponent;
const query = Object.keys(params)
.map(k => esc(k) + '=' + esc(params[k]))
.join('&');
return fetch('my-url', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: query,
})
源