将 JavaScript 对象转换为 URI 编码的字符串
Convert JavaScript object into URI-encoded string
我得到了一个JavaScript对象,我想得到x-www-form-urlencoded
。
类似于$('#myform').serialize()
但对于对象。
以下对象:
{
firstName: "Jonas",
lastName: "Gauffin"
}
将被编码为:
firstName=Jonas&lastName=Gauffin
(请注意,特殊字符应正确编码(
惊讶没有人提到URLSearchParams
var prms = new URLSearchParams({
firstName: "Jonas",
lastName: "Gauffin"
});
console.log(prms.toString());
// firstName=Jonas&lastName=Gauffin
请仔细查看我在这里提供的两个答案,以确定哪个最适合您。
答案 1:
可能需要:准备好在 URL 中用作单个参数的 JSON,以便以后解码。
斯菲德尔
encodeURIComponent(JSON.stringify({"test1":"val1","test2":"val2"}))+"<div>");
结果:
%7B%22test%22%3A%22val1%22%2C%22test2%22%3A%22val2%22%7D
对于那些只想要一个函数来做这件事的人:
function jsonToURI(json){ return encodeURIComponent(JSON.stringify(json)); }
function uriToJSON(urijson){ return JSON.parse(decodeURIComponent(urijson)); }
答案 2:
使用 JSON 作为x-www-form-urlencoded
输出的键值对源。
斯菲德尔
// This should probably only be used if all JSON elements are strings
function xwwwfurlenc(srcjson){
if(typeof srcjson !== "object")
if(typeof console !== "undefined"){
console.log("'"srcjson'" is not a JSON object");
return null;
}
u = encodeURIComponent;
var urljson = "";
var keys = Object.keys(srcjson);
for(var i=0; i <keys.length; i++){
urljson += u(keys[i]) + "=" + u(srcjson[keys[i]]);
if(i < (keys.length-1))urljson+="&";
}
return urljson;
}
// Will only decode as strings
// Without embedding extra information, there is no clean way to
// know what type of variable it was.
function dexwwwfurlenc(urljson){
var dstjson = {};
var ret;
var reg = /(?:^|&)('w+)=('w+)/g;
while((ret = reg.exec(urljson)) !== null){
dstjson[ret[1]] = ret[2];
}
return dstjson;
}
请参阅jQuery.param(...)
。转换为 uri,请参阅链接以获取更多信息!
由于您请求的是序列化对象,因此这可能有点偏离目标。 但以防万一,如果您打算将该对象中的值用作单个参数,这可能是您正在寻找的转换:
var params = {
"param1": "arg1",
"param2": "arg2"
};
var query = "";
for (key in params) {
query += encodeURIComponent(key)+"="+encodeURIComponent(params[key])+"&";
}
xmlhttp.send(query);
效果与上述相同,但功能风格给出了优雅的表达方式:
const to_encoded = obj => Object.keys(obj).map(k =>
`${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');
仅供参考,接受的答案不包括对嵌套对象的支持。以下是实现此目的的一种方法:
function xwwwfurlenc(srcjson, parent=""){
if(typeof srcjson !== "object")
if(typeof console !== "undefined"){
console.log("'"srcjson'" is not a JSON object");
return null;
}
let u = encodeURIComponent;
let urljson = "";
let keys = Object.keys(srcjson);
for(let i=0; i < keys.length; i++){
let k = parent ? parent + "[" + keys[i] + "]" : keys[i];
if(typeof srcjson[keys[i]] !== "object"){
urljson += u(k) + "=" + u(srcjson[keys[i]]);
} else {
urljson += xwwwfurlenc(srcjson[keys[i]], k)
}
if(i < (keys.length-1))urljson+="&";
}
return urljson;
}
@Grallen答案 1 的扩展 – 如果您需要较短的 URL:
输入:
{"q":"SomethingTM","filters":[{"kind":"A","q":"foobar"},{"kind":"B","isntIt":true}],"pagenumber":1}
输出:
('q'~'SomethingTM'_'filters'~!('kind'~'A'_'q'~'foobar')_('kind'~'B'_'isntIt'~true)*_'pagenumber'~1)
而不是:
%7B%22q%22%3A%22SomethingTM%22%2C%22filters%22%3A%5B%7B%22kind%22%3A%22A%22%2C%22q%22%3A%22foobar%22%7D%2C%7B%22kind%22%3A%22B%22%2C%22isntIt%22%3Atrue%7D%5D%2C%22pagenumber%22%3A1%7D
function jsonToUri(v, r, s) {
return encodeURIComponent(
JSON.stringify(v, r, s)
.replace(/[()'~_!*]/g, function(c) {
// Replace ()'~_!* with 'u0000 escape sequences
return '''u' + ('0000' + c.charCodeAt(0).toString(16)).slice(-4)
})
.replace(/'{/g, '(') // { -> (
.replace(/'}/g, ')') // } -> )
.replace(/"/g, "'") // " -> '
.replace(/':/g, '~') // : -> ~
.replace(/,/g, '_') // , -> _
.replace(/'[/g, '!') // [ -> !
.replace(/']/g, '*') // ] -> *
)
}
function uriToJson(t, r) {
return JSON.parse(
decodeURIComponent(t)
.replace(/'(/g, '{') // ( -> {
.replace(/')/g, '}') // ) -> }
.replace(/'/g, '"') // ' -> "
.replace(/~/g, ':') // ~ -> :
.replace(/_/g, ',') // _ -> ,
.replace(/'!/g, '[') // ! -> [
.replace(/'*/g, ']') // * -> ]
, r
)
}
//////// TESTS ////////
var a = {q: 'SomethingTM', filters: [{kind: 'A', q: 'foobar'}, {kind: 'B', isntIt: true}], pagenumber: 1}
var b = jsonToUri(a)
var c = uriToJson(b)
console.log(b)
// ('q'~'SomethingTM'_'filters'~!('kind'~'A'_'q'~'foobar')_('kind'~'B'_'isntIt'~true)*_'pagenumber'~1)
console.log(JSON.stringify(c))
// {"q":"SomethingTM","filters":[{"kind":"A","q":"foobar"},{"kind":"B","isntIt":true}],"pagenumber":1}
var a2 = {"q":"Something(TM)","filters":[{"kind":"A*","q":"foo_bar"},{"kind":"B!","isn'tIt":true}],"page~number":1}
var b2 = jsonToUri(a2)
var c2 = uriToJson(b2)
console.log(b2)
// ('q'~'Something%5Cu0028TM%5Cu0029'_'filters'~!('kind'~'A%5Cu002a'_'q'~'foo%5Cu005fbar')_('kind'~'B%5Cu0021'_'isn%5Cu0027tIt'~true)*_'page%5Cu007enumber'~1)
console.log(JSON.stringify(c2))
// {"q":"Something(TM)","filters":[{"kind":"A*","q":"foo_bar"},{"kind":"B!","isn'tIt":true}],"page~number":1}
为了建立在@Claymore的答案之上,下面是一个对对象进行编码并另外省略尾随 & 符号的函数:
encodeObject(params) {
var query = [];
for (let key in params) {
let val = encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
query.push(val);
}
return query.join('&');
}
function jsonToURI(jsonObj) {
var output = '';
var keys = Object.keys(jsonObj);
keys.forEach(function(key) {
output = output + key + '=' + jsonObj[key] + '&';
})
return output.slice(0, -1);
}
function uriToJSON(urijson) {
var output = {};
urijson = decodeURIComponent(urijson);
urijson = urijson.split('&');
urijson.forEach(function(param) {
var param = param.split('=');
output[param[0]] = param[1];
})
return output
}
let urlParameters = Object.entries(data).map(e => e.join('=')).join('&');
尝试使用这个。
创建一个函数来解析查询参数。
const parseQueryParams = (query) => {
return Object.entries(query)
.map(([key, value]) => key + '=' + encodeURIComponent(value))
.join('&')
}
你需要使用 JSON.stringify()
来序列化 JSON/JavaScript 对象。
在所有现代浏览器中都是本机可用的,但您可以包含以下 js,它将添加所需的库,以防它不可用。
http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js
- 使用 MVC 删除 JavaScript 中硬编码字符串 Asp.Net 最佳方法
- JQuery:参数:硬编码字符串与 ajax 检索到的字符串
- 如何解码 javascript 的编码字符串
- 将 html 编码字符串转换回 html 元素 jQuery/JavaScript
- ArrayBuffer到base64编码字符串
- 如何使用kendoui网格传递来自javascript onclick的带模板选项的硬编码字符串值
- 使用ASP.NET MVC去除JavaScript中的硬编码字符串
- Unicode编码字符串
- Javascript解码JSON字符串,其中包含一个编码字符串
- 将html编码字符串转换为数组
- 获取base 64编码字符串作为变量
- URL编码字符串的方式,谷歌在Chrome浏览器
- 如何转义/编码字符串到JavaScript标识符
- Jquery append自动解码HTML编码字符串
- 在asp.net中用于撇号的编码字符串
- nodejs UTF-8编码字符串有黑色问号
- 修复谷歌地图折线的编码字符串
- HTML编码字符串
- JSON Javascript到Flash通信问题(与ExternalInterface):硬编码字符串工作,否则它不&
- 将编码字符串传递给Javascript函数