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

我正在为Web类中的演示创建一个jQuery示例。我正在尝试将一个作为练习的Javascript程序转换为jQuery（对于有用的部分，如AJAX）。到目前为止一切正常。唯一的问题是：我不知道如何通过异步AJAX用选项填充select元素

这是该程序的屏幕截图，因此我不必解释所有内容：

所有单元格都是包含文本的输入元素，每次修改都通过AJAX保存。最后一行用于添加新行。添加该行时，我添加该行（带有table.appendChild（tr）），其中包含一个接一个创建的所有元素。除了selects（最初是空的，它们的内容是从数据库中提取的）之外，其他一切都在那里工作。下面是一些代码（在函数addLine中，在ajax确认我的数据已插入数据库后调用该函数）：

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

GERRERREPONSE返回我所有选项的字符串（已确认工作）。问题是：它在请求完成之前执行返回，因此返回一个空字符串（因为resultat_ajax尚未定义）。我用setTimeout确认，然后该变量在一秒钟后具有预期值

我的问题是：在这种情况下，如何填充select？我之前创建的另一个版本（没有jQuery）工作起来很有魅力，除了ajaxRequest函数之外，代码完全相同。这是一个没有jQuery的函数，它以前在那里，现在正在工作（返回我期望的选项）：

我有点失望，因为我不能用强大的jQuery获得与使用简单Javascript相同的结果：/你知道我如何获得良好的返回值吗

提前感谢，任何帮助都将不胜感激

---

Sam

您的问题是，在纯JS中，您使用的是同步请求。由此行中设置为false的第三个参数指定：

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

xhr.send(post_data);

因此，在这种情况下，浏览器正在等待，直到在此行完成请求：

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

xhr.send(post_data);

然后执行onreadystatechange处理程序，并且仅在执行

return

之后执行

jQuery具有相同的选项（请参见

async:false

added）：

但是，不要这样做。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]));

与

---

当然，您需要将

no\u ligne

、

noms\u champs

和

compteur

传递到

ajaxRequest

您是说您正在使用

ajaxRequest

函数的返回值吗？谢谢，非常完整的答案！总而言之，这只是我的代码结构没有被修改！谢谢你，我将改变我的构建方式，它将解决问题：）

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