Jquery Ajax調用PHP有時會附加兩次數據

我已經使用jQuery Ajax和PHP編寫了一個腳本，它應該從MySQL數據庫獲取數據，並在<select>元素中附加結果作爲<option>。Jquery Ajax調用PHP有時會附加兩次數據

代碼應該像這樣工作：

當名稱在文字輸入的變化，.modpick類的所有選項從<select>元素中刪除。然後Ajax調用連接到一個PHP腳本，該腳本檢查數據庫中是否有多個具有相同名稱的記錄。如果不是，另一個Ajax調用連接到另一個PHP腳本，該腳本從數據庫中提取數據並將其作爲<option>元素進行響應。 Ajax回調會將PHP腳本中的數據附加到<select>元素。

我遇到的問題是有時<option>元素被追加兩次，因此當您打開<select>元素時，它會顯示兩次相同的<option>。真正令人困惑的是，這並非一直髮生 - 只是偶爾發生。

我不明白爲什麼會發生這種情況，特別是因爲它不會每次都發生，我也不能確定它是否是jQuery或PHP的問題。任何幫助將不勝感激。

代碼：

的jQuery：

$(document).on('change', "#uploadname", function() { 
    uploadname = $(this).val(); 
    $('.modpick').remove(); 
    $.ajax({ 
     url: "uploadnames.php", 
     type: "POST", 
     data: { 
      uploadname: uploadname 
     }, 
     success: function (data) { 
      $('#checkulinputs').html(data); 
      uploademailcheck = $('#emailupcheckinput').val(); 

      if (uploademailcheck == 'nochoose') { 
       uploademail = ''; 
       $('#ulemailcheck').slideUp(); 
       $.ajax({ 
        url: "uploadnamesmodules.php", 
        type: "POST", 
        data: { 
         uploadname: uploadname 
        }, 
        success: function (data) { 
         $(data).appendTo($('#uploadmoduleselect')); 
        } 
       }); 
      } 
     } 
    }) 
})

PHP：

include_once('../../dbconnect.php'); 

$name = mysqli_real_escape_string($conn, $_POST['uploadname']); 
$query = "SELECT * FROM marking_assignments WHERE name = '$name' ORDER BY unit ASC"; 
$details = $conn->query($query); 

while ($row = $details->fetch_assoc()){ 
$modnamequery = "SELECT mod_name FROM modules WHERE module = '" . $row['unit'] . "'"; 
$modname = $conn->query($modnamequery); 
while ($line = $modname->fetch_assoc()){ 
    $descrip = $line['mod_name']; 
    } 

echo '<option value="' . $row['unit'] . '" id="m' . $row['unit'] . '" class="modpick">' . $descrip . '</option>'; 

}

HTML（查詢已運行後 - 注意兩個相同<option>元素）：

<form id="uploadfeedbackform" method="POST" action="uploadfeedback.php"> 
    <input type="text" class="inputs" name="upload_name" id="uploadname" placeholder="Enter Student Name" /> 

    <div id="checkulinputs"></div> 
    <div id="ulemailcheck" class="emailchecker"></div> 

    <select id="uploadmoduleselect" name="uploadmodules"> 
    <option value="choose" class="choosemod">Select Module</option> 
    <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at Work</option> 
    <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at 
    </select> 
</form>

來源

2013-07-26 Chris

在我看來，你的change處理程序可以被多次調用，從而導致多個Ajax請求（非常正確）激發他們的成功回調。 Ajax請求只會排隊而不是替換先前的請求，從而導致可能的未決回調隊列。

如果您的處理程序以某種方式被調用兩次，您可以將ajax請求存儲在一個變量中，並將該請求存儲在abort()中。

實施例：

var myRequest; 

//in your change handler... 
if (myRequest) 
{ 
    myRequest.abort(); 
} 
myRequest = $.ajax({...});

這樣只會有一次在一個有源AJAX請求，並且只有一個是未決成功回調。

來源

2013-07-26 16:09:37 jammypeach

這似乎奏效了 - 謝謝！ – Chris

沒問題，很高興有幫助:) – jammypeach

Jquery Ajax調用PHP有時會附加兩次數據

回答

相關問題