浅谈在js传递参数中含加号(+)的处理方式

一般情况下，URL 中的参数应使用 url 编码规则，即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号（%）后跟两位十六进制数，空格则编码为加号（+）。

但是对于带有中文的参数来说，这种编码会使编码后的字符串变得很长。

如果希望有短一点的方式对参数编码，可以采用 base64 编码方式对字符串进行编码，但是 base64 编码方式不能处理 JavaScript 中的中文，因为 JavaScript 中的中文都是以 UTF-16 方式保存的。

而 base64 只能处理单字节字符，所以不能直接用 base64 对带有中文的 JavaScript 字符串进行编码。

但是可以通过 utf.js 这个程序中提供的 utf16to8 来将 UTF-16 编码的中文先转化为 UTF-8 方式，然后再进行 base64 编码。

这样编码后的字符串，在传递到服务器端后可以直接通过 base64_decode 解码成 UTF-8 的中文字符串。

但是还有个问题需要注意。

base64 编码中使用了加号（+），而 + 在 URL 传递时会被当成空格，因此必须要将 base64 编码后的字符串中的加号替换成 %2B 才能当作 URL 参数进行传递。

否则在服务器端解码后就会出错。

所以我们需要做的就是encodeURI(str).replace(/\+/g,'%2B')

以上就是小编为大家带来的浅谈在js传递参数中含加号(+)的处理方式全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 使用Post提交时须将空格转换成加号的解释

    jQuery的serialize模块中有个r20正则 复制代码 代码如下: var r20 = /%20/g, jQuery.param方法中会将所有的"%20"转成"+",即提交数据前,数据中如果包含空格,那经过encodeURIComponent后,空格会转成"%20" 复制代码 代码如下: encodeURIComponent(' ') === '%20'; // true 最后需要将"%20"转换成"=&qu

  • 解决js数据包含加号+通过ajax传到后台时出现连接错误

    昨天有人提出一个bug,说"B+侦探"和"C+侦探"不能看,我当时很郁闷,因为其他资源是可以播放的,为什么这个不能播放,而且电影名称我都是字符转换过的,在不断调试中,发现url地址电影名字转码后存在一个"+",心想是不是这个问题,删除"+",链接畅通了,果然是这块问题,对加号进行转义. 关于特殊字符的转义,网上很多,我写这个主要是帮大家排查问题提供一点思想

  • 完美解决js传递参数中加号和&号自动改变的方法

    在action中用get方法获得参数,如果参数里有"+",要做处理,否则到后台会变成空格. 解决方案: 1 .改用post方法: 2 .在 js 里用 url = encodeURI(encodeURI(XXX)) ,后台再解码一次: 3 .传递参数的时候直接替换转义,或者直接写转义后的代码 data =  "a + b": data = data.replace(/\+/g, "+"); data = data.replace(/\&/

  • URL的参数中有加号传值变为空格的问题(URL特殊字符)

    1.URL特殊字符需转义 2.空格换成加号(+)   3.正斜杠(/)分隔目录和子目录   4.问号(?)分隔URL和查询   5.百分号(%)制定特殊字符   6.#号指定书签   7.&号分隔参数 转义字符的原因: 如果你的表单使用get方法提交,并且提交的参数中有"&"等特殊符的话,如果不做处理,在service端就会将&后面的作为另外一个参数来看待.例如 表单的action为list.jsf?act=Go&state=5 则提交时通过reques

  • 浅谈在js传递参数中含加号(+)的处理方式

    一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+). 但是对于带有中文的参数来说,这种编码会使编码后的字符串变得很长. 如果希望有短一点的方式对参数编码,可以采用 base64 编码方式对字符串进行编码,但是 base64 编码方式不能处理 JavaScript 中的中文,因为 JavaScript 中的中文都是以 UTF-16 方式保存的. 而 base64 只能处理单字

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • 浅谈原生JS中的延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当浏览器解析到</html> 标签后才会执行代码.在HTML5规范中,defer属性中适用于外部脚本. 而家了defer  的脚本文件会比DOMContentLoaded事件触发前执行. 二.异步脚本 async HTML5为<script>添加了个async属性.这个属性与defer属

  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的  deleteType(),它是调用删除index数量的方法  removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把

  • 浅谈Vue.js

    vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (

  • 浅谈Node.js ORM框架Sequlize之表间关系

    浅谈Node.js ORM框架Sequlize之表间关系

    Sequelize模型之间存在关联关系,这些关系代表了数据库中对应表之间的主/外键关系.基于模型关系可以实现关联表之间的连接查询.更新.删除等操作.本文将通过一个示例,介绍模型的定义,创建模型关联关系,模型与关联关系同步数据库,及关系模型的增.删.改.查操作. 数据库中的表之间存在一定的关联关系,表之间的关系基于主/外键进行关联.创建约束等.关系表中的数据分为1对1(1:1).1对多(1:M).多对多(N:M)三种关联关系. 在Sequelize中建立关联关系,通过调用模型(源模型)的belon

  • 浅谈JVM系列之JIT中的Virtual Call

    浅谈JVM系列之JIT中的Virtual Call

    Virtual Call和它的本质 有用过PrintAssembly的朋友,可能会在反编译的汇编代码中发现有些方法调用的说明是invokevirtual,实际上这个invokevirtual就是Virtual Call. Virtual Call是什么呢? 面向对象的编程语言基本上都支持方法的重写,我们考虑下面的情况: private static class CustObj { public void methodCall() { if(System.currentTimeMillis()==

  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init 在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3. b

  • 浅谈java 执行jar包中的main方法

    浅谈java 执行jar包中的main方法 通过 OneJar 或 Maven 打包后 jar 文件,用命令: java -jar ****.jar 执行后总是运行指定的主方法,如果 jar 中有多个 main 方法,那么如何运行指定的 main 方法呢? 用下面的命令试试看: java -classpath ****.jar ****.****.className [args] "****.****"表示"包名": "className"表示&

随机推荐