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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
jQuery 对象中的类数组操作
Apr 27 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js中this的用法实例分析
Jan 10 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
jquery css实现流程进度条
Mar 26 jQuery
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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 insert语法详解
2008/06/07 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
javascript每日必学之循环
2016/02/19 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Javascript继承机制详解
2017/05/30 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序转发事件实现解析
2019/10/22 Javascript
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python 如何提高元组的可读性
2019/08/26 Python
python通过链接抓取网站详解
2019/11/20 Python
python+opencv实现车道线检测
2021/02/19 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
公司借条范本
2015/05/25 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
在python中读取和写入CSV文件详情
2022/06/28 Python