今天用ckEditor4编辑器时,把编辑器里面的内容通过Ajax传到后端的时候,居然发现后端接收的数据不完整,以下我编辑器内容的源码:
<p>付杰博客</p>
<p>
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&fm=26&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 类型
总结:
这个问题其实解决方法真的是太多了,我只是讲了最简单也是最常见的几种吧!
2023年03月04日 06:45:44 沙发
昨天在wordpress,ajax翻页中传递js代码,被过滤掉了。。不知道咋搞了
2023年03月04日 12:36:09 1层
@何先生 wordpress的话,你得改前后端代码。原理还是跟这个文章一样,处理一下就可以接受并传递了。