url怎么传递对象

问题背景

项目的跳转链接中有时会传递object对象,但是我们直接去传递时会报错,所以需要经过处理再传递。

解决办法:

第一种:使用encodeURI和 decodeURI解决(适合同一个vue项目页面跳转)
第二种:使用encodeURIComponent和decodeURIComponent解决(通用型强,可适合跨端项目跳转)

第一种:使用encodeURI和 decodeURI解决(适合同一个项目跳转)

api说明: 它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。
需要注意的是,它不对单引号’编码。

let objDemo = {
    
    
      name: "zdd",
      age: 12,
      content: "abc"
    };
    let jsonObj = JSON.stringify(objDemo);
    jsonObj = encodeURI(jsonObj);
    let url = "http://localhost:8080/demo?id=" + jsonObj;
    console.log(url);
    jsonObj = decodeURI(jsonObj);
    jsonObj = JSON.parse(jsonObj);
    console.log(jsonObj)

JSON.stringify(objDemo)将对象转换为 JSON 字符串。
encodeURI() 函数可把字符串作为 URI 进行编码。
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

第二种:使用encodeURIComponent和decodeURIComponent解决

api说明: 它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
因此,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码

let objDemo = {
    
    
      name: "zdd",
      age: 12,
      content: "abc"
    };
    let jsonObj = JSON.stringify(objDemo);
    jsonObj = encodeURIComponent(jsonObj);
    let url = "http://localhost:8080/demo?id=" + jsonObj;
    console.log(url);
    jsonObj = decodeURIComponent(jsonObj);
    jsonObj = JSON.parse(jsonObj);
    console.log(jsonObj)

JSON.stringify(objDemo)将对象转换为 JSON 字符串。
encodeURIComponent() 函数可把字符串作为 URI 进行编码。
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码过的 URI 进行解码。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

为什么说第二种方法更适合跨端跳转?

原因是在跨端跳转时,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,会被默认进行加码转换,导致你到网页上使用decodeURI()解码时,会解析出错。所以不如一开始就把对象中所有的字符都进行编码,再到网页中进行解码,这样就不会出错了

猜你喜欢

转载自blog.csdn.net/weixin_43239880/article/details/129988082