使用AJAX和jQuery填充新的select元素

Question

我在Web類中爲演示文稿創建了一個jQuery示例。我試圖將我們做過的JavaScript程序轉換爲jQuery（對於有用的部分，如AJAX）。到目前爲止，一切都很好。唯一的事情是：我無法弄清楚如何通過異步AJAX使用選項填充選擇元素。

下面是程序的截圖，所以我沒有解釋一切：http://imageshack.us/a/img829/5475/tableaui.png

所有的細胞都與它裏面的文字輸入元素，每一個修改是通過AJAX保存。最後一行是添加一個新行。當它被添加時，我添加行（帶有table.appendChild（tr）），並在其中逐個創建所有元素。除了選擇（一開始是空的，它們的內容是從數據庫中提取的），一切都在那裏工作。下面是一些代碼（功能addLine，這就是所謂的內部阿賈克斯確認我的數據已經在數據庫插入後）：

input = document.createElement('select'); 
input.setAttribute('id', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
input.setAttribute('name', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
input.innerHTML = ajaxRequest('contenu_select', Array(no_ligne, valeurs[noms_champs[compteur]], noms_champs[compteur])); 

ajaxRequest就是如下：

function ajaxRequest(action, data, ligneModifie, champModifie) 
{ 
var AJAX_Controller = 'exer_7_carnet_formulaire.php'; 
var post_data = resultat_ajax = ""; 

// Set the posted data 
if(action == 'update') { 
    //stuff 
} 
else if(action == 'insert') { 
    //stuff 
} 
else if(action == 'contenu_select') { 
    post_data += "noLigne=" + data[0] + 
       "&selected=" + data[1] + 
       "&type="  + data[2]; 
} 
else { 
    post_data = null; 
} 
// Send the request 
var jqxhr = $.ajax({ 
    type: "POST", 
    url: AJAX_Controller+'?ajax=1&action='+action, 
    data: post_data, 
    success: function(reponse) { 
     resultat_ajax = processResponse(reponse, data, action); 
    } 
}); 
return resultat_ajax; 
} 

gererReponse返回一個字符串我所有的選擇（確認工作）。問題是：它在請求完成之前執行返回，因此它返回一個空字符串（因爲resultat_ajax尚未定義）。我用setTimeout確認，然後變量在一秒鐘後有預期的值。

我的問題是：如何填充我的選擇在這種情況下？我之前創建的另一個版本（沒有jQuery）像一個魅力一樣，除了ajaxRequest函數外，其他代碼都完全相同。這裏是沒有的jQuery誰曾經在那裏而不是函數，這是工作（返回我的預期選項）：

function ajaxRequest(action, data, ligneModifie, champModifie) 
{ 
// Variables 
var ReqTerminee = 4; 
var ReponseOK_Local = 0; 
var ReponseOK_Remote = 200; 
var AJAX_Controller = 'exer_7_carnet_formulaire.php'; 
var xhr = getXMLHttpRequest(); 
var post_data = typeDeContenu = resultat_final = ""; 

// Monitoring request state 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == ReqTerminee) 
     if (xhr.status == ReponseOK_Local || xhr.status == ReponseOK_Remote) 
      resultat_final = gererReponse(xhr.responseText, data, action); // Here is the interesting part, this actually works and returns the right value. 
     else 
      alert("Code d'erreur: " + xhr.status); 
}; 

// Sets the posted data 
if(action == 'update') 
{ 
    // blahblah 
} 
else if(action == 'insert') 
{ 
    //blahblah 
} 
else if(action == 'contenu_select') 
{ 
    post_data += "noLigne=" + data[0] + 
       "&selected=" + data[1] + 
       "&type="  + data[2]; 
} 
else 
{ 
    post_data = null; 
} 

// Sends the request 
xhr.open("POST", AJAX_Controller+'?ajax=1&action='+action, false); 
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xhr.send(post_data); 

return resultat_final; 
} 

我有點失望，我不能與強大的jQuery比相同的結果我用簡單的Javascript獲得：/您是否知道如何才能獲得良好的回報價值？

在此先感謝，任何幫助將不勝感激！

山姆

Answer 1

你的問題是，在純JS使用的是同步請求。這是在該行設置爲false第三個參數指定：

xhr.open("POST", AJAX_Controller+'?ajax=1&action='+action, false); 

因此，在這種情況下，瀏覽器等待，直到請求在這一行做了：

xhr.send(post_data); 

，比執行onreadystatechange的處理程序，只之後return被執行。

jQuery有相同的選項（參見async:false補充）：

$.ajax({ 
    type: "POST", 
    url: AJAX_Controller+'?ajax=1&action='+action, 
    async:false, 
    data: post_data, 
    success: function(reponse) { 
     resultat_ajax = processResponse(reponse, data, action); 
    } 
}); 

可是 - 不這樣做。 JS總是在單線程中執行，同步請求將凍結整個頁面。用戶不會高興）。正確的方式來做到這一點是代替：

input = document.createElement('select'); 
input.setAttribute('id', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
input.setAttribute('name', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
input.innerHTML = ajaxRequest('contenu_select', Array(no_ligne, valeurs[noms_champs[compteur]], noms_champs[compteur])); 

與

$.ajax({ 
     type: "POST", 
     url: AJAX_Controller+'?ajax=1&action='+action, 
     async:false, 
     data: post_data, 
     success: function(reponse) { 
      resultat_ajax = processResponse(reponse, data, action); 
      input = document.createElement('select'); 
      input.setAttribute('id', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
      input.setAttribute('name', 'ID'+no_ligne+'_'+noms_champs[compteur]); 
      input.innerHTML = resultat_ajax; 
     } 
    }); 

當然，你將需要通過no_ligne，noms_champs和compteur到ajaxRequest