从已使用 AJAX 更新的列表框中获取最新值

Question

我正在使用两个列表框，只要第一个列表框的值发生变化，第二个列表框就会由 AJAX 更新。现在，基于这两个列表框的值，我需要创建一个 table。但问题是我的 table 是用第二个列表框的旧值创建的，而不是最新的。

代码：

<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>

Answer 1

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();
}

从已使用 AJAX 更新的列表框中获取最新值

Getting the latest value from a listbox which has been updated using AJAX

html

javascript

php

ajax