手机
当前位置:查字典教程网 >编程开发 >相关技巧 >奇怪的回车换行问题
奇怪的回车换行问题
摘要:在类unix中,是n(0x0A)。以为没有什么大的问题,没想到,这次开发一个小程序,却让我对这个问题大为头痛。首先发现这个问题是这样的:我的...

在类unix中,是n (0x0A)。以为没有什么大的问题,没想到,这次开发一个小程序,却让我对这个问题大为头痛。

首先发现这个问题是这样的:

我的这个程序采用的是Extjs+php的方式,通过ajax进行通讯。其中有个页面,如图:

奇怪的回车换行问题1

两个文本框,一个text,一个textarea,当textarea中含有回车换行的时候,会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了,会造成js解析出现错误,可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行,有回车换行的时候需要转义符号:n (rn)。

不过这个并不是我要说明的问题,我要说明的问题是,当我在解决这个问题的时候,抓包分析的时候,发现一个有趣的现象,就是发现浏览器发送到服务器对回车换行的编码不一致。

例如上图中的字符串在通过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/ (回车符 rn 在各个浏览器中无耻的表现)

于是我在ie6,ie8,ie9中分别进行了测试,发现果然存在这个问题。

总结:

这个问题虽然小,但是在某些场合却会让人和头痛,这也是搞计算机程序设计人员的悲哀,大量的不兼容,造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果,例如,我这个程序,需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法,一种是采用<pre>标签,但是这个标签用起来很不方便的,尝试发现格式变化不太好控制。另外一种方法就是将回车换行变为<br />标记。我就是采用的这种方法,刚开始我写的正规表达式是/rn/,结果发现什么都没匹配到,后面我就改成/[rn]/但是这种造成的问题就是在ie6,7,8中将会多出一行来。最后为了统一处理,我改为先替换/rn/组合,然后再替换/n/。问题得到解决。

** 本人原创文章,转摘请保留本段内容,万分感谢!

** microdreamsoft(Lin Shaohua):

** 由于本人水平有限,欢迎各位高手指正。

【奇怪的回车换行问题】相关文章:

页面制作统一的头尾的方法(asp+js)

如何给MD5加上salt随机盐值

算法系列15天速成——第十三天 树操作【下】

程序开发中的几个请不要相信

大型网站架构演变和知识体系

真伪静态区别方法分析

图片的色彩空间问题

关于换行和回车的图文小结

Git 教程之查看提交历史详解

水晶报表 分页 的问题

精品推荐
分类导航