jQuery Ajax获取PHP响应时如何显示换行？

这问题我熟！你现在用text()方法的话，它会把所有HTML标签都当成纯文本显示，所以<br />就直接变成字符串输出了，自然不会产生换行效果。给你几个可行的解决思路：

方法一：改用html()方法解析HTML标签 #

这是最直接的解决方案，因为你的PHP已经输出了<br />这种HTML换行标签，只需要把jQuery的text()换成html()，它就会自动解析这些标签：

$.ajax( { 
    url: 'response.php', 
    type: 'get', 
    dataType:'text', 
    success: function(data){ 
        jQuery(".results").html(data); // 把text()改成html()
    } 
} )

这样页面上就会正常显示换行效果了。

方法二：用换行符+CSS样式实现换行 #

如果不想解析HTML标签，也可以调整PHP输出为纯换行符，再配合CSS让换行生效：

1. 修改PHP代码，把<br />换成换行符\n：

<?php 
echo "1\n"; 
echo "2\n"; 
echo "3\n"; 
echo "4\n"; 
echo "5\n"; 
echo "6\n"; 
echo "7\n"; 
echo "8\n"; 
?>

2. 给.results元素添加CSS样式，让换行符被识别：

.results {
    white-space: pre-line;
}

3. JS代码保持原来的text()方法即可，它会把换行符保留，再通过CSS渲染成换行。

方法三：前端替换标签为换行符（备选） #

如果PHP代码不能修改，也可以在前端把收到的<br />替换成换行符，再配合CSS：

$.ajax( { 
    url: 'response.php', 
    type: 'get', 
    dataType:'text', 
    success: function(data){ 
        // 把所有<br />或<br>标签替换成换行符
        var formattedData = data.replace(/<br\s*\/?>/gi, '\n');
        jQuery(".results").text(formattedData); 
    } 
} )

同样需要给.results加上white-space: pre-line;的CSS样式。

总的来说，方法一是最适合你当前场景的，改动最小效果也直接。

内容的提问来源于stack exchange，提问作者user779681