0

我对 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 读取和更新文件都可以正常工作。

4

5 回答 5

4

问题是这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();
})
于 2013-05-31T13:50:42.167 回答
0

您可以使用 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');
        }
    });
于 2013-05-31T13:50:47.823 回答
0

你是对的，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(); });
于 2013-05-31T13:51:20.780 回答
0

这就是你所说的竞争条件。我假设你在后台有一些数据库，所以第一个 php 脚本和 hide() 相互竞争。解决方案是

  1. 在发布和加载之间添加一些睡眠
  2. 使用成功回调，它将等待 post() 完成。
于 2013-05-31T13:53:31.910 回答
0

欢迎来到异步的奇妙世界。

这需要进入“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
});

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

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

...
async: false,
data: ....
于 2013-05-31T13:57:38.617 回答