如何使用JavaScript加载外部文件

Question

I use this code to change text by click on it, i need to load external file text.txt instead of insert it from same page.

 $(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> 

what i need to change to load text.txt

Answer 1

You can use the .load method. Also might want to change the title to how to load external file using Javascript with jquery.

<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 should be in the same directory as the html file. Also, make sure there is text inside the file.

Answer 2

JS can read local files (see FileReader()) but not automatically: the user has to pass the file or a list of files to the script with an html .

You can refer: https://www.javascripture.com/FileReader to get more solution.