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

Question

总的来说，我对 JQuery 和 AJAX 还很陌生。我制作了一个应用程序来从 Spotify 的 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 文件很好地发送到服务器，我看到 Currently playing: 但没有别的。所以这告诉我这不是问题。那么，我在这里做错了什么？它应该正在加载 song.txt 到“轨道”div，对吗？

此外，我正在使用 Goorm-ide 来托管我的容器，并且控制台不如 chrome 的开发工具那么深入。预计：“曲目”div 将替换为 song.txt 内容

结果：没有任何反应。

Answer 1

无论 AJAX 部分是否有效，这里的主要问题是您 (1) 添加了大量 document.ready 事件，并且 (2) 在 [=20= 中无限期地这样做]非常快速的连续.

您可以通过 (1) 使用 one document.ready 事件并在其中设置时间间隔以及 (2) 提供 delay 到间隔，即使只是一秒钟。例如：

$(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 问题（如果有的话）。我了解到您指出 Chrome 开发人员工具已禁用。因此，您要么需要更正它，要么找到另一个工具来调试它。但是您本质上想要观察 AJAX 请求和响应。确认请求的地址是您期望的地址，并观察服务器的响应。这里的客户端代码非常简单并且“工作”得很好，但如果总体结果不是预期的那样，那么您唯一的办法就是调试与服务器的那些交互。

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

JQuery Ajax not replacing div element with text file

html

javascript

ajax

jquery