只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”
我已经想了很多年了。
只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”
我已经想了很多年了。
当前回答
UrlSearchParams API是一个很好的建议,但我不敢相信没有人提到非常有用的.get和.set方法。它们可以用于操作查询字符串,不仅非常容易使用,还可以解决您可能遇到的许多问题。例如,在我的例子中,我想构建一个没有重复键的查询字符串。.set为您解决了这个问题。引用MDN文档:
URLSearchParams.set () 将与给定搜索参数关联的值设置为给定值。如果有多个值,则删除其他值。
示例(来自MDN):
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);
// Add a third parameter
params.set('baz', 3);
params.toString(); // "foo=1&bar=2&baz=3"
另一种更短的语法:
let url = new URL('https://example.com?foo=1&bar=2');
// Add a third parameter
url.searchParams.set('baz', 3);
url.searchParams.toString(); // "foo=1&bar=2&baz=3"
其他回答
如果你正在使用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对象并将值附加到seachParameters
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
我自己也不完全确定,我记得jQuery在一定程度上做到了这一点,但它根本不能处理分层记录,更不用说以php友好的方式了。
有一件事我很确定,当构建url并将产品粘贴到dom中时,不要仅仅使用字符串胶水来做,否则您将打开自己的方便之门。
For instance, certain advertising software in-lines the version string from whatever runs your flash. This is fine when its adobes generic simple string, but however, that's very naive, and blows up in an embarrasing mess for people whom have installed Gnash, as gnash'es version string happens to contain a full blown GPL copyright licences, complete with URLs and <a href> tags. Using this in your string-glue advertiser generator, results in the page blowing open and having imbalanced HTML turning up in the dom.
这个故事的寓意是:
var foo = document.createElement("elementnamehere");
foo.attribute = allUserSpecifiedDataConsideredDangerousHere;
somenode.appendChild(foo);
不是:
document.write("<elementnamehere attribute=\""
+ ilovebrokenwebsites
+ "\">"
+ stringdata
+ "</elementnamehere>");
谷歌需要学习这个技巧。我试图报告这个问题,但他们似乎并不在意。
对于那些喜欢jQuery的人来说,你可以使用表单插件:http://plugins.jquery.com/project/form,它包含一个formSerialize方法。
这并没有直接回答您的问题,但这里有一个通用函数,它将创建一个包含查询字符串参数的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