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 获取Listbox选择的值的代码
Apr 15 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
详解Python发送email的三种方式
2018/10/18 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
幼儿园门卫制度
2014/01/29 职场文书
职业生涯规划书范文
2014/03/10 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫