JavaScript encodeURI 和encodeURIComponent


Posted in Javascript onDecember 04, 2015

encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码,将相关参数转换成UTF-8编码格式的数据。URI在进行定位跳转时,参数里面的中文、日文等非ASCII编码都会进行编码转换。

这两个函数功能上面比较接近,但是有一些区别。

 encodeURI:不会进行编码的字符有82个 :!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
 encodeURIComponent:不会进行编码的字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

问题:

ajax.get ( url+'?k1'=v1+'&k2'=v2+'&k3'=v3, ... ); 

由于URL只进行了encodeURI编码,所以想提交的参数有searchWord = a+b时,变成了a b。 

解决办法: 

ajax.post( url, params,....) 

其中params是对象。 

原因:如果参数是对象或数组时,组件库已经帮你进行encodeURIComponent了。 而如果你仅仅是字符串,组件库什么也没做,所以到后端时就把特殊字符给过滤了。 

encodeURI()用法

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 

该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,# 

提示:如果 URI 组件中含有分隔符,比如 ? 和 #,则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

例子:

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />") 
document.write(encodeURI("http://www.w3school.com.cn/My first/")) 
document.write(encodeURI(",/?:@&=+$#")) 
//批注:只转换域名后面的部分,并且对,/?:@&=+$#不处理。 
// http://www.w3school.com.cn 
// http://www.w3school.com.cn/My%20first/ 
// ,/?:@&=+$#

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

encodeURIComponent()用法 

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 

其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

例子:

document.write(encodeURIComponent("http://www.w3school.com.cn")) 
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")) 
document.write(encodeURIComponent(",/?:@&=+$#")) 
//对比 
// http%3A%2F%2Fwww.w3school.com.cn 
// http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
// %2C%2F%3F%3A%40%26%3D%2B%24%23

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

Javascript 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
JS如何生成动态列表
Sep 22 Javascript
详解JavaScript逻辑Not运算符
Dec 04 #Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 #Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 #Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 #Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 #Javascript
写给小白的JavaScript引擎指南
Dec 04 #Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
详解PHP归并排序的实现
2016/10/18 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
医院总经理职责
2013/12/26 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
战略合作意向书范本
2014/04/01 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
倡议书作文
2015/01/19 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
OpenCV实现普通阈值
2021/11/17 Java/Android
Windows7下FTP搭建图文教程
2022/08/05 Servers