Question

我对它感到沮丧几个小时，需要真正专家的帮助。在下面的代码中，我希望单击带有类fb_detail_btn的按钮，以附加从.ajax函数返回的数据结果。然而，发生的事情是，一旦ajax运行，以前的非ajax附加数据（$(this).append("<div>aaaaaa</div>");）将始终被删除。 我的测试显示php文件已正确运行，因此问题是为什么ajax返回的数据无法被添加到$（this）中，后者被指定为变量。

的JavaScript

//GET FEEDBACK DETAIL METHOD//
function get_feeback_detail(result) {
    alert('inside get_feeback_detail, btn_clicked_id is '+btn_clicked_id);
    return $.ajax ({
        type: "POST",
        url: "../x_get/get_feedback_detail.php",
        data:{fb_id: btn_clicked_id},
    }).then(function(data) {
                alert('then ran!');
                //loading_effect_hide();
                var dataSplit = data.split("|");
                commCode = dataSplit[0];
                //alert(dataSplit[1]);
                if(commCode !=1){
                    $('#testInfo').html(dataSplit[1]);
                    $('#testInfo').addClass("errorRed");
                    //$('.fb_review_table_section').empty();
                    alert('returned false for then in ajax!');
                    return false;
                }else{
                    result =dataSplit[1];
                }   
                alert('result inside then is...   '+result);
                //alert(selectedDiv.attr('class'));
                //return result;
                selectedDiv.append(result);
            //loading_effect_hide();    

    }).fail(function(x,s,e) {
            alert(s+": "+e);
            alert('detail button failed!');// an error occurred

            //alert(result);
        });//$.ajax END

    alert('inside get_feeback_detail, result is...   '+result);


};//get_feeback_detail() END



//Detail Button
$(document).on('click','.fb_detail_btn',function(){
    selectedDiv=$(this);
    selectedDiv.append("<div>aaaaaa</div>");
    elementPropertyName = selectedDiv.attr('name');
    btnNames = $(this).attr("name").split("_");
    btn_clicked_id=btnNames[1];
    result="";
    get_feeback_detail();
    selectedDiv.append("<div>bbbbbbb</div>");
});

HTML

<div class="fb_detail_btn" name="detail_68">aaadadadadadad</div>

=更新= 目前，工作的结果将达到。但是结果将不会被附加。

Answer 1

你滥用承诺。

您需要从then()回调中返回新结果：

    return $.ajax ({
        type: "POST",
        url: "../x_get/get_feedback_detail.php",
        data: 'fb_id='+btn_clicked_id,
        dataType:'json',//ACW-soemthing new!
    }).then(function(data) {
        ...
        return result;
    });

Answer 2

此代码无效：

return $.ajax ({
    …
}).then(function(data) {
    … // callback
    return result;
}); //$.ajax END

alert('inside get_feeback_detail, result is...   '+result);
selectedDiv.append(result);

A jax是异步！正如您在警报中看到的那样，当该部分运行时，结果为undefined。它仅在回调中可用！阅读How do I return the response from an asynchronous call?，然后使用

return $.ajax ({
    …
}).then(function(data) {
    … // callback
    // return result; 
    alert('inside ajax callback, result is...   '+result);
    selectedDiv.append(result); // works now!
});

使用延迟对象/承诺的Ajax调用返回失败

2 个答案: