javascript - Ajax函数一次只显示一个div，PHP，AJAX

Question

我有一个有效的ajax函数，当通过单击按钮调用它时，它会获取时间并将其显示到屏幕上，等待五秒钟，然后再次执行。但同时最多仅显示 1 个 div。我想在单击两个 div 时同时显示它们，但它只是不会同时显示。我不确定我做错了什么。请看下面我的代码:

test1.php

#output1 {
border: 1px solid green;
}
#output2 {
border: 1px solid red;
}

<?php

include('ajax.php');

echo "<input type = 'submit' name = 'name1' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name1\",\"output1\",\"5000\")'>";
echo "<input type = 'submit' name = 'name2' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name2\",\"output2\",\"5000\")'>";

echo "<div id = 'output1'/>";
echo "<div id = 'output2'/>";

?> 

test2.php

<?php

$time = date('H:i:s A');
echo $time;

?> 

ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

// prepare some storage for the xhr and timeout
var queued, xhr;

function timeoutAjax(url, type, theName, id, timeout) {
    // abort pending calls
    if (xhr) {
        xhr.abort();
    }
    // abort queued calls
    clearTimeout(queued);

    // make the call
    xhr = $.ajax({
        type: "POST",
        url: url,
        data: {
            select: $(type + '[name=' + theName + ']').val()
        },
        error: function (xhr, status, error) {
            alert(error);
        },
        success: function (data) {
            document.getElementById(id).innerHTML = data;
            // queue a new call
            queued = setTimeout(function () {
                timeoutAjax(url, type, theName, id, timeout);
            }, timeout);
        }

    });

}

</script>

Answer 1

将您的脚本更改为如下所示:

test.php:

<style>
#output1 {
    min-height: 20px;
border: 1px solid green;
}
#output2 {
    min-height: 20px;
border: 1px solid red;
}
</style>
<?php

include('ajax.php');

echo "<input type = 'submit' name = 'name1' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name1\",\"output1\",\"5000\")'>";
echo "<input type = 'submit' name = 'name2' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name2\",\"output2\",\"5000\")'>";

echo "<div id = 'output1'></div>";
echo "<div id = 'output2'></div>";

?>

test2.php:

<?php

$time = date('H:i:s A');
echo $time;

?> 

ajax.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript">
var queues = {};
function timeoutAjax(url, type, theName, id, timeout) {
    clearInterval(queues[theName]);
    // make the call
    $.ajax({
        type: "POST",
        url: url,
        data: {
            select: $(type + '[name=' + theName + ']').val()
        },
        error: function (xhr, status, error) {
            alert(error);
        },
        success: function (data) {
            document.getElementById(id).innerHTML = data;
            // queue a new call
            queues[theName] = setInterval(function () {
                timeoutAjax(url, type, theName, id, timeout);
            }, timeout);
        },
        complete: function(){
            $('input[name="'+theName+'"]').prop("disabled",false);
        },
        beforeSend: function(){
            $('input[name="'+theName+'"]').prop("disabled",true);
        }
    });
}
</script>