Ajax 没有获取最新版本的 JSON 文件答案

【问题标题】：Ajax not getting most recent version of JSON fileAjax 没有获取最新版本的 JSON 文件
【发布时间】：2018-08-02 21:34:38
【问题描述】：

总的来说，我对术语和编码比较陌生，但我已经尝试精简我的代码，尽管它可能仍然存在冗余。提前感谢您的理解。

我正在使用 ajax 和 php 脚本将一些数据写入服务器上名为 data.json 的文件中。该脚本运行良好，打开 json 文件显示它确实已使用数据进行了更新。 json 文件只包含一个对象数组。

这是执行此操作的代码：

function writeData() {
    $.ajax({
        type : "POST",
        url : "save.php",
        async : true, 
        data : {
        json : JSON.stringify(dataToWrite)
        }
    });

document.getElementById('success-box').innerHTML = "Data successfully written.";
};

...和 PHP：

<?php
   $json = $_POST['json'];
   $file = fopen('data.json','w+');
   fwrite($file, $json);
   fclose($file);
?>

我遇到的问题是：用户可以导航到单独的 HTML 页面，并且可以单击按钮以格式良好的方式查看 json 文件中的数据。这是通过另一个读取数据的 ajax 脚本完成的。后一个 ajax 脚本似乎无法“看到”新更新的 json 文件。它会在使用第一个 ajax 脚本更新之前加载文件的旧版本。我确定第二个 ajax 脚本是在上述 writeData() 完成后运行的，因为它实际上完全位于单独的 HTML 页面上，稍后在用户单击按钮后加载。

这是从 data.json 文件中读取数据的第二个 ajax 脚本（它位于另一个单独的 HTML 页面上）：

$.ajax({
        type : "GET",
        url : "http://eslquiz.net/ell_errors/data.json",
        async : true,
        dataType : 'json',
        success : function(response) {

          data = response;

          document.getElementById('main').innerHTML = `
                <div id='top-stuff'>
                    <button onClick='viewData()'>Reset Filter</button>
                    <button onclick="print2()">Print Worksheet</button>
                </div>
                <br>
                <div id='left-column' class='column'></div>
                <div id='right-column' class='column'></div>
          `;

          leftColumn = document.getElementById('left-column');
          rightColumn = document.getElementById('right-column');

          leftColumn.innerHTML = "<b>Sentences:</b> <br><br>";
          rightColumn.innerHTML = "<b>Errors:</b> <br><br>";

          //add the sentences and their errorTypes:
          for (i=0; i<data.length; i++) {

            var senBox = document.createElement('div');
            senBox.className = 'box';
            senBox.setAttribute('id', 'sen' + i)
            senBox.innerHTML += data[i].text;

            var errBox = document.createElement('div');
            errBox.className = 'box';
            errBox.setAttribute('id', 'err' + i)
            errBox.innerHTML += data[i].errorType;

            leftColumn.appendChild(senBox);
            rightColumn.appendChild(errBox);

          }

        }

    });

所有这些文件都托管在 One.com 上的同一目录中。

奇怪的是，当我手动打开 data.json 文件并以任何方式编辑其内容（例如，通过删除所有内容）时，下一次进行 ajax 调用时，它会读取我刚刚手动更新的版本.这让我觉得这可能与 One.com 服务器刷新自身有关？

我尝试在同步/异步之间调整 ajax，并使用cache: false，但这些似乎没有任何影响。

我四处寻找，似乎无法找出这里发生了什么。感谢您提供的任何指导。

【问题讨论】：

也许您在writeData() ajax 完成之前调用了第二个ajax？显示更多代码上下文
谢谢。第二个ajax实际上是在一个单独的HTML页面上，以避免在writeData()完成之前运行的问题。只有在使用第一个 ajax 添加数据后，用户才会导航到第二个 HTML 页面。更新了问题以提及这一点。
这可能值得一读/尝试：stackoverflow.com/questions/33390424/…
作为我的测试，我会尝试通过 php-script 提供该 json。要么只测试问题出在哪里，要么作为最终解决方案（这将使您还可以隐藏 data.json 对未登录的用户）
旁注：网上的data.json现在不是json所以会在data.length抛出一个错误

标签： javascript php jquery json ajax

【解决方案1】：

谢谢。我最终使用了以下内容：

jQuery.ajaxSetup({
    cache: false
});

我之前尝试过使用它，但由于某种原因它不起作用，不知道为什么。但它现在正在工作！谢谢。

【讨论】：

【解决方案2】：

首先，GET 方法可以被浏览器缓存。二、确保响应是json类型

$.ajax({
    type : "GET",
    url : "http://eslquiz.net/ell_errors/data.json?rand_v=" + Matn.random(), // add a random try again
    async : true,
    dataType : 'json',
    success : function(response) {
      // Make sure the response is a json type
      // console.log(typeof(response));
      // console.log(typeof(JSON.parse(response)));
      data = response;
      // ...

【讨论】：