Question

我正在为我的Web类中的演示文稿创建一个jQuery示例。我正在尝试将我们作为练习的Javascript程序转换为jQuery（对于有用的部分，如AJAX）。到目前为止一切都很好，一切都很好。唯一的事情：我无法弄清楚如何通过异步AJAX填充选项元素。

以下是该计划的屏幕截图，因此我无需解释所有内容：http://imageshack.us/a/img829/5475/tableaui.png

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

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

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

1 个答案: