遇到的问题之“使用get请求时,请求参数中存在#导致后端request获取不到值”
一.问题
使用get请求时,请求参数中存在#导致后端request获取不到值
发出参数带#的请求
后端接收不到SKU的值,连后面platformId的值都没有了
二.原因
1、有些符号[参数包含有特殊字符(%、#、&)]在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。
编码的格式为:%+字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值。
例如 空格的编码值是"%20"。
2、url参数有长度限制,参数太长就会显示不全
三.解决方案
js采用encodeURIComponent技术进行编译,将#号转化为%23值
测试方案
const skus = "ZZY210730610RDS,#C262E"; console.log(encodeURIComponent(JSON.stringify(skus.replace(/\#/g,"%23")))); console.log(JSON.stringify(skus.replace(/\#/g,"%23"))); console.log(skus.replace(/\#/g,"%23")); console.log(skus); console.log(JSON.stringify(skus)); console.log(encodeURIComponent(JSON.stringify(skus))); console.log(encodeURIComponent(skus));
测试结果
在研究发现了encodeURIComponent编译可直接转换, 就尝试使用console.log(encodeURIComponent(skus));得到[ZZY210730610RDS%EF%BC%8C%23C262E],就可以满足隐藏#的需求了,而且在后端也会自动转换为#
四.案例
前端请求
/* 设置参数 */
let data = "year=" + year + "&platformId=" + platformId + "&departmentId=" + departmentId + "&repositoryIds=" + repositoryIds + "&skus=" + encodeURIComponent(skus);
/* 拼接连接 */ let url = CONTEXT_PATH + '/wzw/export/siteSku?' + data;\
/*发出请求:get*/
window.open(url, '_blank').location;
后端接收
五.总结
1.这里原本想用替换replace, 但是这个过于麻烦,后端还要转换回来
2.后来看到使用JSON.stringify就能成功的,后面因为他这里时改为String类型,反而多了""号更麻烦了
3.在研究发现了encodeURIComponent编译可直接转换, 就尝试使用console.log(encodeURIComponent(skus));得到[ZZY210730610RDS%EF%BC%8C%23C262E],就可以满足隐藏#的需求了,而且在后端也会自动转换为#
4.要注意数据源的规范,一些唯一固定值可以避免这些特殊字符
5.有疑问的点:明明%号也是在特殊字符列,为什么这里转成十六进制后却可以进行传输了呢
* 博客文章部分截图及内容来自于学习的书本及相应培训课程,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。
* 备注:王子威
* 我的网易邮箱:wzw_1314_520@163.com
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步