转自zccst的又一次掉进encodeURIComponent的坑里了

  问题:

  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 进行解码。

  更详细的比较请看挨踢前端关于 escape、encodeURI、encodeURIComponent

如果觉得本文不错,请点击右下方【推荐】!

js基础篇——encodeURI 和encodeURIComponent的更多相关文章

  1. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  2. PHP中的urlencode,rawurlencode和JS中的encodeURI,encodeURIComponent

    PHP中的urlencode,rawurlencode和JS中的encodeURI,encodeURIComponent [PHP中的urlencode和rawurlencode] urlencode ...

  3. JS基础篇--sort()方法的用法,参数以及排序原理

    JS基础篇--sort()方法的用法,参数以及排序原理   sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...

  4. JS escape、encodeURI 、encodeURIComponent 编码与解码[转]

    转至:http://jc-dreaming.iteye.com/blog/1702407 本文讨论如何对传递参数用JS编码与解码 1:编码与解码方法的对应关系 escape ------------- ...

  5. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  6. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  7. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  8. JS中 escape, encodeURI 和 encodeURIComponent的区别

    为避免Url字符串在传递过程中的乱码,我们一般需要对字符串进行处理. 在Javascript中实现此功能的全局对象有3个,分别是:escape(),  encodeURI()  和 encodeURI ...

  9. 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)

    温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...

随机推荐

  1. [ASE][Daily Scrum]12.12

    好久没有写daliy scrum了…… 目前看,我们的无限地图,AI以及计分都差不多成型了,不过还有很多bug在调整当中 今天要做的是 Zhao 调通分数&聊天服务器 Yiming Shili ...

  2. 修改TFS2013服务账户或者密码

    修改TFS2013服务账户或者密码 TFS作为微软软件开发的全生命周期管理解决方案,可以很好的与windows的域管理结合使用,方便多系统下用户的管理和授权.如果TFS使用的服务账户设置的域账户密码过 ...

  3. 【推荐】【给中高级开发者】构建高性能ASP.NET应用的几点建议

    本篇目录 早期阶段就要对应用进行负载测试 使用高性能类库 你的应用是CPU密集还是IO密集的 使用基于Task的异步模型,但要慎重 分发缓存和会话(session)状态 创建Web Gardens 巧 ...

  4. QQ揭秘:如何实现托盘闪动消息提醒?【低调赠送:QQ高仿版GG 4.1 最新源码】

    当QQ收到好友的消息时,托盘的图标会变成好友的头像,并闪动起来,点击托盘,就会弹出与好友的聊天框,随即,托盘恢复成QQ的图标,不再闪动.当然,如果还有其它的好友的消息没有提取,托盘的图标会变成另一个好 ...

  5. node(md5)

    md5是一种信息-摘要算法,即针对一段明文给出一个hash值,在密码学中最经典的用法是验证数据的完整性,因为一旦原始数据发生改变那么生成的摘要也必将不同. 网络中md5可以用于用户密码的加密,即在数据 ...

  6. Guava 并行 Futures实例

    Future可以用来构建复杂的异步操作,方法不是返回一个值,而是一个Future对象.创建Future对象的过程(比如调用Future异步函数接口),不会阻塞当前线程操作,而且对象第一个次创建没有值, ...

  7. 字体大小自适应纯css解决方案

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...

  8. 那些VisualStudio隐藏的调试功能

    VisualStudio是一个强大的调试工具,里面很多隐藏功能少有人问津,但是在特定场景可以节省你很多时间,本文主要介绍一些VisualStudio调试相关的隐藏功能,欢迎大家补充. 运行到指针(Ru ...

  9. C#将dll打包到程序中

    最近比较懒,加上内容也不多就懒得排版了,字放大了,看起来应该方便一点 直接进入主题 先来看一个栗子,假设现在有一个第三方dll namespace TestLibrary1 { public clas ...

  10. ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once,Run Anywhere

    ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNa ...