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函数.然后,measuredEntered函数应使用新的"OK"按钮刷新该区域,准备从新的"Select4"文本字段中提取数据.但是,再次单击它时,将使用Select4中的原始值调用measurementEntered.有任何想法吗？

谢谢.

Answer 1

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

解决方案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 -

一个有价值的替代方案是切换到jQuery.在文档就绪函数中添加以下代码以禁用所有请求中的缓存.

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

链接到 - 停止缓存jQuery .load响应