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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 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
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python 功能和特点(新手必学)
2015/12/30 Python
用Python实现KNN分类算法
2017/12/22 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python实现可逆简单的加密算法
2019/03/22 Python
python中的print()输出
2019/04/12 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
教师职称自我鉴定
2014/02/12 职场文书
与美同行演讲稿
2014/09/13 职场文书
会计工作态度自我评价
2015/03/06 职场文书
金榜题名主持词
2015/07/02 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Mysql如何查看是否使用到索引
2022/12/24 MySQL