JQuery Post转义提交HTML模板
最近遇到这样一个问题,在表单中有一个textarea文本框,用来保存HTML模板。
因为是HTML模板,所以会有<html>、<script>等标签,但是这样无法通过AJAXPost方式保存。
经过实验,<script是导致无法提交的根源。找到原因,解决办法就简单了,就是把<转义成HTML实体<。
最新说明:这个最后发现,是__POST被后台的PHP代码拦截了,所以不是客户端的问题,把PHP拦截代码去掉就可以了。
具体措施如下:
1HTML表单
Form表单如下:
<formaction="save.php"method="post"> <textareaname="source"></textarea> <buttontype="submit">提交</button> </form>
然后,在文本框中输入如下内容,
<!DOCTYPEhtml> <html> <head> <title>演示</title> <scripttype="text/javascript"> alert("弹出框"); </script> </head> <body> <div>演示</div> </body> </html>
再提交。
2Post提交
JQueryPost提交代码如下:
$("form[method='post']").on('submit',function(e){ e.preventDefault(); varform=$(this); $.post( form.attr("action"), form.serialize(), function(result){ $('.alert').html(result.msg).show().delay(1500).fadeOut(); if(result.success){ setTimeout(function(){ window.location.href="index.php"; },1000); }else{ returnfalse; } }, 'json' ); });
这样是无法提交的。
3转义函数
我们需要先对HTML符号进行转义,函数如下:
//转义字符为HTML实体,相当于PHP的htmlspecialchars()函数 functionhtml_encode(str) { vars=""; if(str.length==0)return""; s=str.replace(/&/g,"&"); s=s.replace(/</g,"<"); s=s.replace(/>/g,">"); s=s.replace(/\"/g,"""); returns; } //HTML实体转换为HTML标签,相当于PHP的htmlspecialchars_decode()函数 functionhtml_decode(str) { vars=""; if(str.length==0)return""; s=str.replace(/&/g,"&"); s=s.replace(/</g,"<"); s=s.replace(/>/g,">"); s=s.replace(/"/g,"\""); returns; }
4转义后再提交
修改HTML代码,把textarea的name属性改成另外一个名称,如source改成html_source,
<formaction="save.php"method="post"> <textareaname="html_source"></textarea> <buttontype="submit">提交</button> </form>
然后就可以在post之前转义textarea内容,再提交source就可以了,如下:
$("form[method='post']").on('submit',function(e){ e.preventDefault(); varform=$(this); varhtml_source=encodeURIComponent(html_encode(form.find('textarea[name=html_source]').val())); form.find('textarea[name=html_source]').prop('disabled',true); $.post( form.attr("action"), form.serialize()+'&source='+html_source, function(result){ $('.alert').html(result.msg).show().delay(1500).fadeOut(); if(result.success){ setTimeout(function(){ window.location.href="index.php"; },1000); }else{ form.find('textarea[name=html_source]').prop('disabled',false); returnfalse; } }, 'json' ); });
这样就可以顺利提交了,下次PHP显示时,用 htmlspecialchars_decode()函数解码就可以正常显示。