如何使用JavaScript加载外部文件

Question

我使用此代码通过单击来更改文本，我需要加载外部文件text.txt而不是从同一页面插入它。

 $(document).ready(function() { $("#div3").click(function() { changtext(); }); }); function changtext() { document.getElementById("div2").innerHTML = "thank you text has been changed"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div2">The text will get loaded here</div> <div id="div3">click me to chang text </div> 

我需要更改以加载text.txt

Answer 1

您可以使用.load方法。 也可能想将标题更改为如何使用带有jquery的Javascript加载外部文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div2">The text will get loaded here</div>
<div id="div3">click me to chang text </div>

<script type="text/javascript">
 $(document).ready(function() {
    $('#div3').click(function() {
    $('#div2').load('text.txt');
  });
});
</script>

text.txt应与html文件位于同一目录中。 另外，请确保文件中包含文本。

Answer 2

JS可以读取本地文件（请参阅FileReader（）），但不能自动读取：用户必须使用html将文件或文件列表传递给脚本。

您可以参考： https : //www.javascripture.com/FileReader以获取更多解决方案。