Question

通常需要将存储在服务器中的文件中的内容加载到Javascript变量中，或者将其显示在HTML元素中，以便在网页内完成某些任务。

如果不依赖JQuery，我该怎么做？

Answer 1

我发现这样做的最简单方法之一是创建一个获取文件的函数，并在下载准备好后调用另一个函数。因此，在下面的示例中，当加载“test.txt”文件内容时，它将显示在pre元素中。

<html>
<body>
<pre id="output"></pre>
</body>
<script type="text/javascript">

function get_file(url, callback)
{
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.send();
}

get_file("test.txt", function(response)
{
    document.getElementById("output").innerHTML=response;
});

</script>
</html>

重要

如果要使XMLHttpRequest同步，只需更改行

即可

xmlhttp.open("GET", url, true);

要

xmlhttp.open("GET", url, false);

但它会以挂起您的网页为代价，直到数据加载为止。

Answer 2

尝试使用fetch： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

它比XMLHttpRequest更容易使用。

然后，在您获取资源后，使用insertAdjacentHtml将其添加到文档正文中：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

即

fetch("test.json")
  .then(function(response) {
           return response.json();
        })
  .then(function(json) {
           document.body.insertAdjacentHtml("afterbegin", "<p>" + json + "</p>);
        });
  .catch(function(error) {
             console.log('There has been a problem with your fetch operation: ' + error.message);
          });

如何在没有JQuery的情况下在Javascript中获取文件内容

2 个答案: