php - ajax onclick 命令拉取过时的数据

Question

我正在编写一个使用 [我认为是] AJAX 的网页，以便可以将数据输入文本字段，单击“确定”框，将数据保存到数据库，然后重新加载该区域包含文本字段和“确定”按钮以及基于输入数据的其他一些数据。现在，该过程在第一个条目上运行良好，但如果您尝试再次输入信息，它的行为就像再次输入原始值一样:
示例:

用户输入:5
页面的行为就好像输入是:5
用户输入:4
页面的行为就好像输入是:5
用户输入:3
页面的行为就好像输入是:5

当页面最初加载时，该区域看起来像这样(是的，它是空白的。我调用在页面初始加载结束时加载它的代码):

echo "<table>";  
    // ...Other stuff which I don't think is involved in the problem, though I've been wrong before...   
echo "<tr>";  
echo "<td>";  
echo "<div id=\"measurements\">";  
    // Filled by javascript functions below  
echo "</div>";  
echo "</td>";  
echo "</tr>";  
echo "</table>";  

以下 javascript 函数可用，并在页面加载时调用:

function measurementEntered(pid, vid, oid, varn, dat) {  
    // Create XMLHttpRequest object  
    var xmlhttp;  
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }  
    else {  
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }  

    xmlhttp.open("GET", "ajax_measurements_update.php?varn="+varn+"&pid="+pid+"&vid="+vid+"&oid="+oid+"&dat"+dat+"&user="+user, false);
    xmlhttp.send();
    document.getElementById("measurements").innerHTML=xmlhttp.responseText;
}

而 ajax_measurements_update.php 页面包含以下代码来输入数据并刷新区域(还有一些代码可以向区域添加更多信息，但我认为这不是问题所在。如果您怀疑它可能, 我可以发布更多):

echo "<input type=\"text\" id=\"Select4\" name=\"dat\" size=\"20\" />";

和

echo "<button type=\"button\" onclick=\"measurementEntered($pid, $vid, $oid, $varn, Select4.value);\" />OK</button>";  

所以这应该在单击“确定”按钮后从“Select4”文本字段中提取数据并调用 measurementEntered 函数。然后 measurementEntered 函数应使用新的“确定”按钮刷新区域，准备好从新的“Select4”文本字段中提取数据。但是，当您再次单击它时，将使用 Select4 中的原始值调用 measurementEntered。有什么想法吗？

谢谢。

Answer 1

您的网络浏览器正在缓存连续的请求。这就是为什么您在第一个请求中获得预期结果并且在所有连续请求中获得相同结果的原因。

解决方案 1 -

要禁用缓存，在ajax_measurements_update.php中添加如下头信息

header("cache-control: no-cache");

解决方案 2 -

将你的请求URL改为如下(在末尾添加一个时间参数，这样你的浏览器就会认为这是一个新的URL，所以不会从缓存中加载)

xmlhttp.open("GET", "ajax_measurements_update.php?varn="+varn+"&pid="+pid+"&vid="+vid+"&oid="+oid+"&dat"+dat+"&user="+user+"&temp="+(new Date()).getTime(), false);

解决方案 3 -

一个有值(value)的选择是切换到 jQuery。在文档就绪函数中添加以下代码以禁用所有请求中的缓存。

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

链接到 - Stop jQuery .load response from being cached