AJAX POST数据中有特殊符号(转义字符)导致数据丢失的解决方法

使用Ajax传送数据时，当数据中存在加号(+)、连接符(&)或者百分号(%)时，服务器端接收数据时会丢失数据。分析Ajax传送数据的格式与Javascript的语法：

1. "+"号：JavaScript解析为字符串连接符，所以服务器端接收数据时"+"会丢失变空格。

2. "&"号：JavaScript解析为变量连接符，所以服务器端接收数据时&符号以后的数据都会丢失变空格。

解决方法是通过正则表达式进行编码替换(假设postStr是你想通过ajax传送的数据字符串)

postStr = postStr.replace(/%/g, "%25"); 
postStr = postStr.replace(/\&/g, "%26"); 
postStr = postStr.replace(/\+/g, "%2B"); 

下面是其它网友的补充

今天用ckEditor4编辑器时，把编辑器里面的内容通过Ajax传到后端的时候，居然发现后端接收的数据不完整，以下我编辑器内容的源码：

<p>
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&amp;fm=26&amp;gp=0.jpg"/>
</p>

结果“4186543320”后面的内容就一直没有收到。

原因：

通过网络查资料，得到的原因是分号”;”导致的问题。

ajax传输以“;”分割的字符串，却发现后台只会接受到第一个字符串。

例如：我向后台传输

“小明;小红;小白”

后台只会接收到小明。

经过我的亲自测试，发现：

1、Ajax传的字符串数据，javascript用console.log可以完整的输出来，只是后端接收不全，例如：

2、Ajax传的字符串数据，我直接传分号”;”+其它正常数据，后台一样是可以接收到的，一点问题都没有。

根本原因是：

ajax请求内容中包含一些HTML转义字符，例如：

  > < & "

最主要的是这些转义字符中含有&。

例如：

如果我发送“ blablabla＆ltgrogrogro”，则服务器仅收到“ blablabla”。

＆在URL参数中是什么意思？

我相信做过web程序开发的人都知道：＆代表数据查询字符串中的另一个变量，&以此格式表示新参数的开始。

最后去看了一下“ckEditor4编辑器”，无论是为空字符串还是回车，都会自动的帮你进行HTML转义，哪怕你配置了“不转义HTML”参数，也会自动帮你转。

解决方法

知道了上面的原因，解决方法就容易大了，有程序经验的人已经知道怎么做了？

原理就是：把HTML转义字符解码成标签或者编码再传送数据。

以我这里用“ckEditor4编辑器”为例子，只需要修改config.js，增加如下配置参数：

config.basicEntities = false; config.htmlEncodeOutput = false;

以上这种也有一个弊端，如果你的编辑器里面有“代码块“功能，要插入一些代码，例如：PHP、java、python、c++.......等等。代码块这里同样也会自动进行HTML字符转义。

最终的解决方法：

1、ajax请求传字符串数据的时候，我们先做JavaScript URL编码，例如：

var contents = encodeURIComponent(document.getElementById( 'editor1' ).value);

编码函数：encodeURIComponent()

解码函数：decodeURIComponent()

注意：用此编码函数，Asp与PHP处理后端的时候不需要解码，会自动的相互通讯，自动解码。

或

编码：encodeURI()

解码：decodeURI()

注意：用此编码函数，后端处理必须先解码。

2、后端接收数据的时候，我们要做一个URL解码，以PHP为例子，例如：

$contents = htmlentities(urldecode($_POST['contents']),ENT_QUOTES);

urldecode() — 解码

urlencode() — 编码

注意：为了安全起见，不管前端用哪个函数？只要是URL编码过的，后端都需要解码，好兼容。

其它解决方法：

Ajax请求传数据类型，可以改为：json、text。具体请参考：HTTP Content-type 类型

总结：

这个问题其实解决方法真的是太多了，我只是讲了最简单也是最常见的几种吧！

到此这篇关于AJAX POST数据中有特殊符号(转义字符)导致数据丢失的解决方法的文章就介绍到这了,更多相关AJAX POST数据丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论