jQuery的工作太快？

Question

我对JQuery很陌生，我的代码有一个小问题。 我希望你们中的任何一个都能帮助我。

我使用外部PHP文件将某些HTML数据加载到主文件中。 现在，还有另一个外部PHP文件，用于更新完全相同的数据。 我正在使用JQuery函数检查我想更新的字段的值，并且如果它不为空，我会调用更新文件。 在重新加载DIV之后，我正在处理并将新数据发布到其中（使用外部加载数据文件）。

现在的问题是，我相信我的JQuery函数/ sometimes /不会等待更新文件完成，而是立即从第二个文件读取新内容，而不必等待内容实际更新。 这种情况有时会发生，但不会经常发生。

这是我的JQuery函数：

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() } )
            $("#div_adminMessage").hide();
            $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
            $("#div_adminMessage").fadeIn();
        }
        else{
            alert('do not leave this field blank');
        }
    });

如果您想知道，读取文件在从我的数据库中读取所需的数据后仅打印一些HTML代码，而更新文件将更新相同的数据。

我的JQuery代码有什么问题吗？ 因为坦率地说，我相信我的两个PHP读取和更新文件都可以正常工作。

Answer 1

问题在于post是一个异步操作，因此它将执行并立即返回，并且在等待该请求完成时，将执行load函数。

正确的方法是使用回调：

$.post("/includes/script_files/updateAdminMessage.php", { 
    adminMessage:    $("#adminMessage").val() }, 
    function(){
        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();
})

Answer 2

您可以使用post的回调成功函数来初始化剩余负载：

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, success: function(){
                $("#div_adminMessage").hide();
                $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
                $("#div_adminMessage").fadeIn();
            })
        }
        else{
            alert('do not leave this field blank');
        }
    });

Answer 3

没错， jQuery.post()不是阻止函数，但是它的第三个参数是成功函数，因此您可以将想要发生的任何事情放在帖子的“后面”：

        $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, function(data,status,xhr){
           $("#div_adminMessage").hide();
           $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
           $("#div_adminMessage").fadeIn(); });

Answer 4

这就是您所说的竞赛条件。 我假设您在后台有一些数据库，因此第一个php脚本和hide（）相互竞争。 解决方案是

1. 在发布和加载之间增加一些睡眠
2. 使用成功回调 ，它将等待post（）完成。

Answer 5

欢迎来到异步的美好世界。

这需要进入“ post”的成功回调处理程序：

$("#div_adminMessage").hide();
$('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
$("#div_adminMessage").fadeIn();


jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

看起来像这样

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function (data, textStatus, jqXHR) {

        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();

    },
    dataType: dataType
});

等等。“ fadeIn”可能需要进入下一个回调

您可能会强制jQuery等待/阻止，直到请求完成为止，但是那打破了AJAX背后的概念（“ A”代表异步）：

...
async: false,
data: ....