JQueryAjax沒有用文本檔案替換div元素-有解無憂

所以，我對 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 內容

結果：沒有任何反應。

uj5u.com熱心網友回復：

無論 AJAX 部分是否有效，這里的主要問題是您 (1) 添加大量事件和 (2) 以非常快速的連續document.ready無限期地這樣做。

您可以通過 (1) 使用一個 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 問題（如果有的話）。我在對您表示 Chrome 開發人員工具已禁用的問題發表評論時意識到。所以你要么需要糾正它，要么找到另一個工具來除錯它。但是您基本上會想要觀察 AJAX 請求和回應。確認請求的地址是您所期望的，并觀察服務器的回應。這里的客戶端代碼非常簡單并且“作業”很好，但如果整體結果不是預期的，那么你唯一的辦法就是除錯與服務器的互動。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410413.html

標籤：

上一篇：rmarkdown在svg中保留xlink

下一篇：如何在模式中顯示API資訊？