Ajax发送转义字符&nbsp、&gt、&lt、&quot接收数据不全问题

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

<p>付杰博客</p>
<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可以完整的输出来,只是后端接收不全,例如:Ajax传字符串数据,后台接受数据不完整

 

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

 

根本原因是:

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

&nbsp;
&gt;
&lt;
&amp;
&quot;

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

 

例如:

如果我发送“ 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 类型

 

总结:

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

    A+
发布日期:2021年04月15日 13:59:07  所属分类:Ajax
最后更新时间:2021-04-15 14:06:02
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
前端工程化构建工具:Babel7+Webpack4
  • ¥ 15元
  • 市场价:15元
Sublime Text3使用视频教程:神级代码编辑工具
  • ¥ 15.0元
  • 市场价:15.0元
PowerDesigner数据库设计与建模
  • ¥ 58元
  • 市场价:58元
Swoole项目实战(第二季)
  • ¥ 99.0元
  • 市场价:99.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: