2012-06-24 56 views
4

我有用戶動態地創建(使用jQuery)輸入框的頁面。用戶可以在他創建的每個輸入框中輸入值。上點擊保存按鈕呼叫到創建併發送使用一個XMLHttpRequest到這些值插入DB中process.php文件這些值通過所有的輸入框用戶進行迭代JavaScript函數製成。如果我送在同一時間只有一個請求在發送多隻XMLHttpRequest的最後一個請求返回成功

此代碼工作正常。但是,如果我循環,並從每個盒子發送在每次迭代的值(手段,發送使用循環多個請求),只有最後一次請求查找的成功。所有除了最後一個呼叫中的其他呼叫被中止(發現使用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(); 
} 
?> 

這是螢火蟲顯示:

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 

回答

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); 
     }); 
    }); 
} 
6

您正在使用的所有請求相同的XMLHttpRequest對象,所以只要你啓動的要求,下一個啓動就可以了另一個請求從而中止前一個。

爲每個請求創建一個新的XMLHttpRequest對象或僅使用jQuery's ajax。沒有使用jQuery並不好。

+0

謝謝。這兩種方法都很有魅力! :) – Ivin