我正在使用两个列表框，每当第一个列表框的值更改时，第二个列表框就会由 AJAX 更新。现在，根据这两个列表框的值，我需要创建一个表。但问题是我的表是使用第二个列表框的旧值而不是最新的值创建的。
法典：
<script>
function pop_to()
{
var xmlhttp= new XMLHttpRequest();
var from=document.getElementById("date_from").value;
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("date_to").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","pop_to.php?from="+from,true);
xmlhttp.send();
}
function update_sales_content()
{
var xmlhttp= new XMLHttpRequest();
var from=document.getElementById("date_from").value;
var to=document.getElementById("date_to").value;
var xmlhttp= new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sales_data").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sales_report.php?from="+from+"&to="+to,true);
xmlhttp.send();
}
</script>
<body>
<select id="date_from" onchange='pop_to();update_sales_content();' style="position:relative;left:730px;">
<option>From</option>
<?php
$sql="select distinct order_dt from cust_order order by order_dt";
$result=mysql_query($sql,$con) or die(mysql_error());
if($result)
{
while($rec=mysql_fetch_row($result))
{
echo"<option value='$rec[0]'>$rec[0]</option>";
}
}
?>
</select>
<select id="date_to" onchange='update_sales_content()' style="position:relative;left:800px;">
</select>
<div id="sales_data">
</div>
</body>
AJAX 是异步的。当您执行以下操作时：
onchange='pop_to(); update_sales_content();'
您正在立即运行update_sales_content()，而不是等待 AJAX 响应。您需要从pop_to()回调函数调用它：
function pop_to()
{
var xmlhttp= new XMLHttpRequest();
var from=document.getElementById("date_from").value;
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("date_to").innerHTML=xmlhttp.responseText;
update_sales_content();
}
}
xmlhttp.open("GET","pop_to.php?from="+from,true);
xmlhttp.send();
}