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 拖放效果实现代码
Jan 22 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
快速入门Vue
Dec 19 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
论坛头像随机变换代码
2006/10/09 PHP
一个简单的MySQL数据浏览器
2006/10/09 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
JS中的作用域链
2017/03/01 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
四年级数学教学反思
2014/02/02 职场文书
学习标兵获奖感言
2014/02/20 职场文书
现场施工员岗位职责
2014/03/10 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
同学会演讲稿
2019/04/02 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书