Question

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

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

知道为什么会这样吗？

我的代码：

<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

Answer 1

您不能将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);
        });
    });
}

Answer 2

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

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

发送多个XMLHttpRequests时，只有最后一个请求返回成功

2 个答案: