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 鼠标点击事件及其它捕获
Jun 04 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
详解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网站提速三大“软”招
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JSON格式化输出
2014/11/10 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
初中生学习的自我评价
2013/11/14 职场文书
物流专业求职计划书
2014/01/10 职场文书
化学教学随笔感言
2014/02/19 职场文书
应用数学专业求职信
2014/03/14 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
房屋出售授权委托书
2014/10/12 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
MySQL 数据表操作
2022/05/04 MySQL