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 无符号右移赋值操作
Apr 17 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
详解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获取http请求的头信息实现步骤
2012/12/16 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python对象体系深入分析
2014/10/28 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python 创建TCP服务器的方法
2020/07/28 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
转预备党员政审材料
2014/02/06 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Django项目如何正确配置日志(logging)
2021/04/29 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL