4

ユーザーの入力ボックスを (jQuery を使用して) 動的に作成するページがあります。ユーザーは、作成した各入力ボックスに値を入力できます。保存ボタンをクリックすると、ユーザーが作成したすべての入力ボックスを反復処理する JavaScript 関数が呼び出され、XMLHttpRequest を使用してこれらの値が DB に挿入される process.php ファイルに送信されます。

一度に 1 つの Request のみを送信すると、このコードは正常に機能します。しかし、それをループして、各反復で各ボックスから値を送信すると (ループを使用して複数の要求を送信することを意味します)、最後の要求のみが成功します。最後の呼び出しを除く他のすべての呼び出しは中止されます (firebug を使用して見つかりました)。

なぜこれが起こっているのですか？

私のコード:

<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 に答える