4

我有一个为用户动态创建（使用 jQuery）输入框的页面。然后，用户可以在他创建的每个输入框中输入值。单击保存按钮后，将调用一个 javascript 函数，该函数遍历用户创建的所有输入框，并使用 XMLHttpRequest 将这些值发送到 process.php 文件，该文件将这些值插入数据库。

如果我一次只发送一个请求，此代码可以正常工作。但是，如果我循环它并在每次迭代时从每个框发送值（意味着使用循环发送多个请求），则只有最后一个请求会成功。除了最后一个调用之外的所有其他调用都被中止（使用萤火虫找到它）。

知道为什么会这样吗？

我的代码：

<script>
function saveTimeSlots(){
    var ajaxRequest;
    try{
        ajaxRequest = new XMLHttpRequest();
    }
    catch(e){
        alert('Issue with browser.')
    }
    ajaxRequest.onreadystatechange = function(){
        if( ajaxRequest.readyState==4 ){
            alert(ajaxRequest.responseText); //This returns empty except for last call
        }
    }
    var timeSlots = document.getElementById('formSlots').childNodes;
    var date = $.datepicker.formatDate('dd-mm-yy', new  Date($('#datepicker').datepicker("getDate")));
    for(j=0; j<timeSlots.length; ++j){
        var time = timeSlots[j].getElementsByTagName("input")[0].value;
        var status = 1;
        var queryString = "?date=" + date + "&time=" + time + "&status=" + status;
        ajaxRequest.open("GET", "process.php" + queryString, true);
        ajaxRequest.send(null);
    }
}
</script>
<input type="button" value="Save time slots" class="custom-button" onclick="saveTimeSlots()"/>

以下是process.php的代码

<?php
mysql_connect( $dbhost,$user,$pwd );
mysql_select_db( $dbase ) or die( mysql_error() );

$date = mysql_real_escape_string( $_GET['date'] );
$time = mysql_real_escape_string( $_GET['time'] );
$status = mysql_real_escape_string( $_GET['status'] );

$query = "INSERT INTO time_slots (`date`,`time`,`status`) VALUES ('" . $date . "','" . $time . "'," . $status . ")";
echo $query;
if( mysql_query( $query ) ){
    echo "Success";
}else{
    echo mysql_error();
}
mysql_close();
}
?>

这是 Firebug 显示的内容：

GET http://localhost/process.php?date=24-06-2012&time=1&status=1 Aborted
GET http://localhost/process.php?date=24-06-2012&time=2&status=1 Aborted            
GET http://localhost/process.php?date=24-06-2012&time=3&status=1 200 OK 31ms
4

2 回答 2

6

您不能将 的实例XMLHttpRequest用于多个请求。为每个请求创建一个新实例。

由于您已经在使用 jQuery，我建议使用$.ajax(或$.get) 来获取请求。

function saveTimeSlots(){
    $('#formSlots').children().each(function() {
        var time = $(this).find('input:first').val();
        var status = 1;
        var queryString = "?date=" + date + "&time=" + time + "&status=" + status;
        $.get("process.php" + querystring, function(responseText) {
            alert(responseText);
        });
    });
}
于 2012-06-24T14:24:44.260 回答
6

您XMLHttpRequest对所有请求使用相同的对象，因此一旦您启动请求，下一个请求就会启动另一个请求，这会中止前一个请求。

XMLHttpRequest为每个请求创建一个新对象，或者只使用jQuery 的 ajax。拥有 jQuery 而不使用它是不好的。

于 2012-06-24T14:24:45.140 回答