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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
js中有关IE版本检测
Jan 04 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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下载文件的详解
2013/06/02 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
CSS3实现swap交换动画
2016/01/19 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
教师业务学习制度
2014/01/25 职场文书
致全体运动员广播稿
2014/02/01 职场文书
销售队伍口号
2014/06/11 职场文书
医德医魂心得体会
2014/09/11 职场文书
工作收入住址证明
2014/10/28 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
mysql的数据压缩性能对比详情
2021/11/07 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS