從 javascript 動態加載 JSON 文件

Question

在我的 RPi 上，我有一個應用程序（用 C++ 開發）在后台運行，它根據一些傳感器輸入執行一些復雜的數學運算，並每秒產生一些結果。 我想在網站上顯示這些數據。 所以我的想法是讓應用程序生成一個 JSON 格式的文件，並從 javascript 腳本中以交互方式讀取該文件。

該應用程序現在在我的 html 目錄中生成一個文件ModelState.json ，看起來像

{ "x" : -0.886289 , "y" : -0.434931 }

基於this answer，我編寫了以下html/js

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="ModelState"></p>
</body>

<script type="text/javascript">
    window.onload = function () {
        setInterval(showModelState, 1000);

        function showModelState() {
            readJsonFile("ModelState.json", function(ModelStateJson){
                var ModelStateObj = JSON.parse(ModelStateJson);
                if (ModelStateObj.x && ModelStateObj.y) {
                    document.getElementById("ModelState").innerHTML =
                        "x: " + ModelStateObj.x + ", " +
                        "y: " + ModelStateObj.y;
                }
            });
        }
        function readJsonFile(file, callback) {
            let rawFile = new XMLHttpRequest();
            rawFile.overrideMimeType("application/json");
            rawFile.open("GET", file, true);
            rawFile.onreadystatechange = function() {
                if (rawFile.readyState === 4 && rawFile.status === 200) {
                    callback(rawFile.responseText);
                }
            }
            rawFile.send(null);
        }
    }
</script>
</html>

但是，我觀察到該文件似乎加載了一次。 網頁上的數據不會改變，而文件中的數據會改變。 我不知道為什么。 是不是XMLHttpRequest保持文件打開，這樣就不會觸發onreadystatechange並且不會再次調用回調 function？ 我希望send響應完成請求，從而關閉文件。

Answer 1

正如評論中的克里斯托瓦爾所說，問題是由瀏覽器緩存讀取文件引起的。

一種解決方案是將瀏覽器與動態 url 混淆，例如通過更改

readJsonFile("ModelState.json", function(...

至

readJsonFile("ModelState.json?time=${Date.now()}", function(...

另一種解決方案（基於此）是瀏覽器不緩存 POST http 請求方法。 因此你可以改變

rawFile.open("GET", file, true);

至

rawFile.open("POST", file, true);

第三種解決方案（在此處找到）是在rawFile.open("GET"...

rawFile.setRequestHeader("Pragma", "no-cache");

可以在此處找到用於緩存控制的更詳細的請求標頭

從 javascript 動態加載 JSON 文件

問題描述

1 個解決方案

解決方案1
0 已采納 2020-07-07 13:03:41

從 javascript 動態加載 JSON 文件

問題描述

1 個解決方案

解決方案1 0 已采納 2020-07-07 13:03:41

解決方案1
0 已采納 2020-07-07 13:03:41