如何在 Javascript 中创建查询参数？

小开

如果您使用的是原型机，那么就有表格，连载

如果您使用的是 JQuery，那么就有 Ajax/序列化

我不知道任何独立的功能来实现这一点，但谷歌搜索它出现了一些有希望的选项，如果你目前不使用图书馆。如果你不是，你真的应该，因为他们是天堂。

小开

这个线指向一些在 php 中转义 URL 的代码。有 escape()和 unescape()将做大部分的工作，但你需要添加一些额外的东西。

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}


function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}

小开

最佳答案

给你:

function encodeQueryData(data) {
const ret = [];
for (let d in data)
ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
return ret.join('&');
}

用法:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

小开

功能性的

function encodeData(data) {
return Object.keys(data).map(function(key) {
return [key, data[key]].map(encodeURIComponent).join("=");
}).join("&");
}

小开

我们刚刚发布了 Arg.js，一个旨在一劳永逸地解决这个问题的项目。这在传统上是非常困难的，但现在你可以做到:

var querystring = Arg.url({name: "Mat", state: "CO"});

还有阅读作品:

var name = Arg("name");

或者得到所有的东西:

var params = Arg.all();

如果你关心 ?query=true和 #hash=true之间的差异，那么你可以使用 Arg.query()和 Arg.hash()方法。

小开

Zabba 在评论中对目前接受的答案提出了一个建议，对我来说这是最好的解决方案: 使用 Param ()。

如果我对原问题中的数据使用 jQuery.param()，那么代码很简单:

const params = jQuery.param({
var1: 'value',
var2: 'value'
});

变量 params将是

"var1=value&var2=value"

有关更复杂的示例、输入和输出，请参阅 Param ()文档。

小开

对打字稿稍作修改:

  public encodeData(data: any): string {
return Object.keys(data).map((key) => {
return [key, data[key]].map(encodeURIComponent).join("=");
}).join("&");
}

小开

只是想重温一下这个10年前的问题。在这个现成编程的时代，您最好的选择是使用依赖项管理器(npm)设置项目。有一个完整的家庭图书馆行业，编码查询字符串，并照顾所有的边缘情况。这是其中一个比较受欢迎的-

Https://www.npmjs.com/package/query-string

小开

这应该可以起作用:

const createQueryParams = params =>
Object.keys(params)
.map(k => `${k}=${encodeURI(params[k])}`)
.join('&');

例如:

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

结果:

name=John&postcode=W1%202DL

小开

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"

小开

URLSearchParams 增加了对浏览器的支持。

const data = {
var1: 'value1',
var2: 'value2'
};


const searchParams = new URLSearchParams(data);


// searchParams.toString() === 'var1=value1&var2=value2'

Js 提供了查询字符串模块。

const querystring = require('querystring');


const data = {
var1: 'value1',
var2: 'value2'
};


const searchParams = querystring.stringify(data);


// searchParams === 'var1=value1&var2=value2'

小开

我改进了第九幕的函数来处理数组值

function encodeQueryData(data) {
const ret = [];
for (let d in data) {
if (typeof data[d] === 'object' || typeof data[d] === 'array') {
for (let arrD in data[d]) {
ret.push(`${encodeURIComponent(d)}[]=${encodeURIComponent(data[d][arrD])}`)
}
} else if (typeof data[d] === 'null' || typeof data[d] === 'undefined') {
ret.push(encodeURIComponent(d))
} else {
ret.push(`${encodeURIComponent(d)}=${encodeURIComponent(data[d])}`)
}


}
return ret.join('&');
}

例子

let data = {
user: 'Mark'
fruits: ['apple', 'banana']
}


encodeQueryData(data) // user=Mark&fruits[]=apple&fruits[]=banana

小开

通过使用查询编码器，您可以拥有一些不错的选项，比如自定义日期格式化程序、嵌套对象，并决定 val: true是仅仅是 value还是 value=true。

const { encode } = require('queryencoder');


const object = {
date: new Date('1999-04-23')
};


// The result is 'date=1999-04-23'
const queryUrl = encode(object, {
dateParser: date => date.toISOString().slice(0, 10)
});

小开

这里有一个例子:

let my_url = new URL("https://stackoverflow.com")
my_url.pathname = "/questions"


const parameters = {
title: "just",
body: 'test'
}


Object.entries(parameters).forEach(([name, value]) => my_url.searchParams.set(name, value))


console.log(my_url.href)

小开

内置的 URL类为创建和解析 URL 提供了一个方便的接口。

没有需要 URL对象的网络方法，字符串就足够了。所以技术上我们不必使用 URL。但有时候它真的很有帮助。

例子

let url = new URL("https://google.com/search");
url.searchParams.set('var1', "value1");
url.searchParams.set('var2', "value2");
url.searchParams.set('var3', "value3");
url.searchParams.set('var4', "value4 has spaces");


console.log(url)