获取本地文本文件并将内容分配给变量答案

【问题标题】：Fetching local text file and assign contents to a variable获取本地文本文件并将内容分配给变量
【发布时间】：2020-08-21 21:51:30
【问题描述】：

就这么简单，我不知道我做错了什么。我正在尝试获取本地文本文件并将其存储在变量中，但无论我使用哪种方法（获取 api、$.get 和 ajax），我总是未定义。

$(document).ready(function() {

    var fileConfiguration;

    $.get( "Configuration.h", function( data ) {
        fileConfiguration = data;
    });
    
    document.getElementById("demo").innerHTML = fileConfiguration;

});

数据变量已正确获取，我可以使用 alert 或 console.log 并正确查看内容。当我将它分配给一个变量时，它是未定义的。我想这与它是一个异步回调有关，但无法找出问题所在。

【问题讨论】：

Ajax 无法获取跨域的资源。本地文件是file:/// 的协议，被认为是跨域的。如果你想通过 ajax 检索文件，你必须建立一个本地服务器。
是的，我很难解决这个问题，但我正在我的网站上对此进行测试并遇到同样的问题。
好的，这仍然是同一个问题。您从服务器加载的文件试图对您的机器进行 ajax 调用，而您的机器没有本地服务器，将无法通过 ajax 获取 file:///。
您提供的代码不是从您的本地计算机检索文件，如果该网页是从远程服务器提供的。 get 请求的那个 url 不是完全限定的，所以它是一个相对路径。相对路径将始终解析为它们来自的源。在这种情况下，到远程服务器。不是你的本地机器。
请求是异步的。您需要在分配 fileConfiguration 的回调中使用数据。在送达之前你不能吃披萨。请参阅：How do I return the response from an asynchronous call?

标签： javascript jquery dom get

【解决方案1】：

正如您和@charlietfl 所指出的，AJAX 请求是异步的，这意味着代码中的最后一条语句在响应之前执行，因此 fileConfiguration 仍然未定义。

因此，进行赋值的最佳位置是在回调内部，如下所示：

$(document).ready(function() {
    $.get( "Configuration.h", function( data ) {
        document.getElementById("demo").innerHTML = data;
    });
});

【讨论】：