奇怪的回车换行问题
发布时间:2022-03-27 07:24:49
在类unix中,是\n (0x0A)。以为没有什么大的问题,没想到,这次开发一个小程序,却让我对这个问题大为头痛。
首先发现这个问题是这样的:
我的这个程序采用的是Extjs+php的方式,通过ajax进行通讯。其中有个页面,如图:
两个文本框,一个text,一个textarea,当textarea中含有回车换行的时候,会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了,会造成js解析出现错误,可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行,有回车换行的时候需要转义符号:\n (\r\n)。
不过这个并不是我要说明的问题,我要说明的问题是,当我在解决这个问题的时候,抓包分析的时候,发现一个有趣的现象,就是发现浏览器发送到服务器对回车换行的编码不一致。
例如上图中的字符串在通过extjs中的
Ext.Ajax.request({
url:'CatMan.php',
form:this.FORM_NAME,
scope:this,
callback:function(o,s,r){
var retObj=Ext.decode(r.responseText);
if(retObj.success){
alert('保存成功!');
}
}
});
进行保存时候,发现发送到服务器的编码是这样的:
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的红色标记的%0A,这是\n的编码。\r的编码竟然不见了。
然后我如果采用form submit直接提交,却发现编码是:
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
发现\r(%0D)的编码是在的。
(以上为在IE9中测试结果。)
难道是ExtJs的问题?
如果分析Extjs的源代码,找到取form值得地方。如下:
serializeForm : function(form) {
debugger
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
name,
data = '',
type,
hasValue;
Ext.each(fElements, function(element){
name = element.name;
type = element.type;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
});
return data.substr(0, data.length - 1);
},
可以发现extjs采用的是js中的encodeURIComponent函数进行值的编码。
难道是encodeURIComponent的问题?
搜索网络,发现一篇博文中提到这个问题,见http://www.yeahxj.com/2011/11/07/enter-code-for-all-browser/ (回车符 \r\n 在各个浏览器中无耻的表现)
于是我在ie6,ie8,ie9中分别进行了测试,发现果然存在这个问题。
总结:
这个问题虽然小,但是在某些场合却会让人和头痛,这也是搞计算机程序设计人员的悲哀,大量的不兼容,造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果,例如,我这个程序,需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法,一种是采用<pre>标签,但是这个标签用起来很不方便的,尝试发现格式变化不太好控制。另外一种方法就是将回车换行变为<br />标记。我就是采用的这种方法,刚开始我写的正规表达式是/\r\n/,结果发现什么都没匹配到,后面我就改成/[\r\n]/但是这种造成的问题就是在ie6,7,8中将会多出一行来。最后为了统一处理,我改为先替换/\r\n/组合,然后再替换/\n/。问题得到解决。
** 本人原创文章,转摘请保留本段内容,万分感谢!
** microdreamsoft(Lin Shaohua):
** 由于本人水平有限,欢迎各位高手指正。


猜你喜欢
- 一、前言 JDK(Java Development Kit )是一切java应用程序的基础,可以说,所有的java应用程序是构建
- 前言最近在新的环境配置pycharm的项目时候,发现pycharm不能连接到mysql数据库。由于安了java环境但是还没配置相关的库,并且
- 本文实例为大家分享了js实现酷炫倒计时动画的具体代码,供大家参考,具体内容如下前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公
- 本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE html
- 使用py时可能需要连续运行多条shell 命令1.# coding: UTF-8import sysreload(sys)sys.setde
- 在该网站下载你所需要的mysql依赖驱动版本,比如我的QT版本是5.15就下5.15版的 按照你的Qt编译版本和机器位数进行下载,
- 本文实例讲述了Python面向对象程序设计。分享给大家供大家参考,具体如下:示例1:#encoding:utf-8''
- 本文实例讲述了python根据文件大小打log日志的方法,分享给大家供大家参考。具体方法如下:import glob import logg
- 无论是 DAO 还是 ADO 都有两种从 Recordset 对象中查询记录的方法: Find 方法和 Seek 方法。在这两种方法中可以让
- Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时
- 如何在win7+Python3.5的环境下安装成功scrapy?通过pip3 install Scrapy直接安装,一般会报错:error:
- 继承是面向对象编程的一个重要的方式,因为通过继承,子类就可以扩展父类的功能。回忆一下Animal类层次的设计,假设我们要实现以下4种动物:&
- 根据题意理解:本质就是写分页查询:每页条数:10条;当前页码:4页;//第一种:select * from (select ROW
- 本文实例为大家分享了python opencv实现图像矫正的具体代码,供大家参考,具体内容如下问题简介一般的我们对图像中的目标进行分析和检测
- 概述本文主要介绍一种降维方法,PCA(Principal Component Analysis,主成分分析)。降维致力于解决三类问题。1.
- 写在前面:这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。我
- 误区 #28:有关大容量事务日志恢复模式的几个误区28 a)常见的DML操作可以被“最小记录日志” &nb
- MySql中longtext字段的返回最近开发中用到了longtext这种字段。在mysql中该字段的最大长度为4G如下图所示开发中遇到的一
- 本文实例为大家分享了python远程连接MySQL数据库的具体代码,供大家参考,具体内容如下连接数据库这里默认大家都已经配置安装好 MySQ
- 适用于先读后更新的数据竞争场景,且应该将加锁操作放到事务中,防止锁被自动释放,原因参考mysql docfunc UpdateUser(db