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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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教程 变量定义
2009/10/23 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
Java模拟试题
2014/11/10 面试题
网络宣传方案
2014/03/15 职场文书
晚会主持词开场白
2014/03/17 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
公司委托书怎么写
2014/08/02 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
学雷锋的心得体会
2014/09/04 职场文书
给客户的检讨书
2014/12/21 职场文书
李强为自己工作观后感
2015/06/11 职场文书
公司开业致辞
2015/07/29 职场文书
音乐研修感悟
2015/11/18 职场文书
海弦WR-800F
2022/04/05 无线电