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 For Beginners(转载)
Jan 05 Javascript
jQuery使用手册之 事件处理
Mar 24 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue form check 表单验证的实现代码
Dec 09 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 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
菜鸟修复电子管记
2021/03/02 无线电
Phpbean路由转发的php代码
2008/01/10 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
super关键字的用法
2012/04/10 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
食品安全承诺书范文
2014/08/29 职场文书
批评与自我批评范文
2014/10/15 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
python实现简单的聊天小程序
2021/07/07 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python