JQuery Ajax 没有用文本文件替换 div 元素答案

【问题标题】：JQuery Ajax not replacing div element with text fileJQuery Ajax 没有用文本文件替换 div 元素
【发布时间】：2022-01-13 18:33:37
【问题描述】：

所以，我对 JQuery 和一般的 AJAX 还是很陌生。我制作了一个应用程序来从 Spotify 的 API 中检索数据，该 API 写入 song.txt （这部分工作得很好。它应该每秒更新一次。）并且 HTML 文件将提取 song.txt 的内容并更改id 为 'track' 的 div

 <!DOCTYPE html>
<html>
    <head>
        <title>Camashima's Site</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            setInterval(function () {
                $(document).ready(function () {
                    $('#track').load('../output/song.txt');
                });
            });
        </script>
    </head>
    <body>
        Currently Playing:
        <div id="track">
            .
        </div>
    </body>
</html>

JS 代码将 html 文件发布到服务器就好了，我看到了当前正在播放：但没有别的。所以这告诉我这不是问题。那么，我在这里做错了什么？它应该将 song.txt 加载到“track” div 中，对吧？

另外，我使用 Goorm-ide 来托管我的容器，并且控制台不像 chrome 的开发工具那样深入。预期：“track” div 将替换为 song.txt 内容

结果：没有任何反应。

【问题讨论】：

你能补充一些关于 song.txt 的信息吗？你试过 console.log song.txt 吗？
使用谷歌浏览器并转到控制台并报告任何错误。检查开发工具中的“网络”选项卡，查看是否对文本文件发出请求。如果是，它会加载还是有错误？您的页面和文本文件的网址是什么？这看起来像是在“/”中的主页，并且您在 url 中使用“..”来访问文件。我的猜测是该文件没有被提供。
@NicklasF song.txt 实际上只是 fs.writeFileSync('./output/song.txt', text) 的输出。冻结 server.js 后，song.txt 包含以下内容：2:47 / 2:52 - Falling (feat. blackbear) - blackbear Remix by Trevor Daniel
@JasonGoemaat 我无法调试它，由于某种原因，这台笔记本电脑上禁用了 chrome 开发人员工具，因此我使用 goorm。这是提供的 html 的链接。 camashimas-current-track.run-eu-central1.goorm.io
看起来您的 html 位于所服务的根文件夹中。问题是 song.txt 不在提供的目录中。 load() 调用发生在客户端上，并且 url 需要解析为也可以由同一服务器提供服务的内容。您的浏览器无法使用 '..' 转到父目录，因为没有提供任何服务。如果您的网址类似于“example.com/mypage/index.html”，那么它会尝试获取“example.com/output/song.txt”。由于没有路径元素可以上去，所以没有办法获取 url。

标签： javascript html jquery ajax

【解决方案1】：

无论 AJAX 部分是否有效，这里的主要问题是您 (1) 添加大量 document.ready 事件和 (2) 非常快速地连续无限期地这样做。

您可以通过 (1) 使用 one document.ready 事件并在其中设置间隔以及 (2) 为间隔提供延迟来纠正此问题，即使只是一秒钟。例如：

$(document).ready(function () {
  // execute this code once, and only once, when the document is ready
  setInterval(function () {
    $('#track').load('../output/song.txt');
  }, 1000);  // perform this interval operation every 1000 ms
});

从那里，您可以开始合理地调试 AJAX 问题（如果有的话）。我意识到 in a comment on the question 您表示 Chrome 开发人员工具已被禁用。所以你要么需要纠正它，要么找到另一个工具来调试它。但是您基本上会想要观察 AJAX 请求和响应。确认请求的地址是您所期望的，并观察服务器的响应。这里的客户端代码非常简单并且“工作”得很好，但如果整体结果不是预期的，那么你唯一的办法就是调试与服务器的交互。

【讨论】：