Question

我有一个工作的ajax函数，当点击一个按钮调用它时，它会得到时间并将其显示在屏幕上，等待五秒钟，然后再次执行。但是，最多只能同时显示1个div。我想在它们被点击时同时显示两个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>

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

1 个答案: