Question

我最近发现了一种方法，可以使用jQuery Ajax将外部文件的内容包含到网站中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $.get("http://something.com/content.txt", function(a) {
    document.write("<p>Some text! - " + a + "</p>")
  });
</script>

输出将在此之后：

<p>Some text! - Content from external file</p>

除了此代码覆盖整个标记外，它工作正常。其他一切都将被排除在外。

任何想法如何解决这个问题？

Answer 1

document.write将替换所有内容。

您正在使用jQuery，因此如果您想保留现有代码，请尝试使用.append()：

$.get("http://something.com/content.txt", function(a) {
  $("#element-where-inserting").append(a);
});

Answer 2

如果使用jquery并且假设您的div标识为mycontent且文件内容为纯文本，则对文档中的特定选择器进行修改：

$("#mycontent").text(a);

Answer 3

这是因为document.write()方法重写了整个html文档。

你应该做的是找到你想通过javascript放置你的回复内容的元素（使用html()方法，因为你正在使用jQuery）：

$("#elementId").html(response);

其中response是您的ajax内容。

Answer 4

使用$([some element]).load([your URL])这将加载您收到的数据并将其放入目标元素内。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

  $('some-div').load("http://something.com/content.txt")

</script>

jQuery.Ajax：$ .get和document.write替换现有的标记

4 个答案: