jQuery.Ajax：$不用彷徨和文件撰写替换现有的标记(jQuery.Ajax: $.get a

我最近发现了一种方法，包括外部文件的内容转换成使用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与ID 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 and document.write replace existing markup