Question

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

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

现在的问题是，我相信我的JQuery功能/有时/不会等待更新文件完成并立即从第二个文件中读取新内容，而无需等待内容获得实际更新。这种情况时不时发生，但不是经常发生。

这是我的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()不是阻挡功能，但是它的第三个参数是成功功能，所以你可以放置你想要发生的任何事情＆＃34;＆＃34;＆＃34;那里的帖子：

        $.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（）相互竞争。解决方案

在帖子和加载之间添加一些睡眠
使用success callback，等待post（）完成。

Answer 5

欢迎来到异步的精彩世界。

这需要进入＆＃34; post＆＃34;：

的成功回调处理程序

$("#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
});

等。可能是＆＃34; fadeIn＆＃34;需要进入下一个回调

你可以强制jQuery等待/阻塞，直到请求完成，但这打破了AJAX背后的概念（＆＃34; A＆＃34;代表异步）：

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

JQuery工作得太快了？

5 个答案: