1报错 URI malformed、2如何发送含有空格的get请求encodeURI、3关于URL编码/解码的4个方法、

报错 URI malformed 是因为

由于decodeURI转码时,通过%进行解析,如果字符串中存在%,则会出现URI malformed

解决办法请看第五条

一、场景

一个查询接口,可以通过输入空格,来获取查询字段中 含有空格的项目。

后端接口请求为get,不做处理的话,url会自动将空格给删掉,
我无法发送带空格的查询条件:

let api = `xxx?pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
request({ api, method:"GET" })

【https://xxxx?pageNum=1&pageSize=10&keyword=】

二、解决 利用 encodeURI();

加入处理 encodeURI 处理参数以后:

let api = `xxx?pageNum=${pageNum}&pageSize=${pageSize}&keyword=${encodeURI(keyword)}`;
request({ api, method:"GET" })

当我输入三个空格时:
【https://xxxx?pageNum=1&pageSize=10&keyword=%20%20%20】
三、encodeURI() 文档
encodeURI() MDN 解读文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

三、JavaScript的四个URL编码/解码方法

encodeURI
将元字符和语义字符之外的字符都进行转义,一般用于知道该URL只用于完整的URL时使用

encodeURIComponent
将除了语义字符之外的字符进行转义,包括元字符,因此,它的参数通常是URL的路径或参数值,而不是整个URL。

decodeURI
还原转义后的URL,是encodeURI方法的逆运算。

decodeURIComponent(此方法可以还原被转义的 url)
还原转义后的URL片段。是encodeURIComponent方法的逆运算。

四、关于特殊字符转义失败、【#】

encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字 - _ . ! ~ * ' ( )
数字符号 #
请注意,encodeURI自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests,因为 "&", "+","="不会被编码,然而在 GET 和 POST
请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

五、encodeURIComponent 可转义大部分特殊符号

MDN链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

不转义的字符:
A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURIComponent() 和 encodeURI 有以下几个不同点:

var set1 = ";,/?:@&=+$";  // 保留字符
var set2 = "-_.!~*'()";   // 不转义字符
var set3 = "#";           // 数字标志
var set4 = "ABC abc 123"; // 字母数字字符和空格

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值