jQuery .ajax .load .get x(h)tml 相关错误 ("mismatched tag, expected: </br>")

Question

我的问题其实很简单，但我仍然需要一个有深入知识的人。想象一下以下简单的任务:将一些外部 html 数据加载/解析到当前 html 文件的元素中。

比方说，这是我们要检索的外部文件的内容:

<div id="element">
  <img src="test.jpg"><br>
  lorem ipsum
</div>

这是使用 jQuery .load 的代码

$("#div_in_mother_html").load("external.html #element");

工作起来很有魅力。
但在控制台中，我看到以下错误:

1. mismatched tag. Expected: <br />
2. mismatched tag. Expected: <img />

这是为什么？

嗯，很明显，.load是jquery中.ajax的简写，据我所知，这是一个跨浏览器XMLHttpRequest 。这可能会导致标签不匹配的问题，因为 HTML 标签不会关闭，与 XHTML 不同:

HTML - <img src="test.jpg"><br>
XHTML - <img src="test.jpg" /><br />


下次尝试

好吧，我说，必须可以解析 HTML，而不是 XML。是的，jQuery 的文档也是这么说的。我从 .load 切换到更高级的 .ajax 并尝试手动设置数据类型:

$.ajax({ type:'GET', url:'ajax.txt', contentType: "text/plain; charset=utf-8", 
 dataType:'text', success:function(data){ 
    $('#div_in_mother_html').html(data); } 
});

再说一遍，它有效......但同样的无声错误出现在控制台中。


本地环境中的 Firefox 32 浏览器控制台中出现错误。

Answer 1

我的猜测是，当您在文件系统中请求它时，出于某种原因将其解析为 xml。无论如何，你真的不应该从文件系统测试 ajax，因为文件系统永远不会返回你从真实服务器获得的所有相同的 header 。修复方法是设置一个在本地主机上运行的本地网络服务器。