javascript - 在哪里或者哪里刷新 View ？

Question

我有一个 MySQL 表单，带有拖放热点和几个图像标签。数据字段只是一个 char(100)，用于存储上传图像文件的链接。对于每个图像标签，我都有一个用于删除图像的按钮。它依次调用确认对话框，如果确认，则调用 Javascript 函数来删除图像。 Javascript 函数调用一个单独的 PHP 文件来执行对 MySQL 表的更新。我想做的是在执行完所有这些操作后刷新 View 。我在谷歌和这个网站上进行了搜索，并尝试了所有声称有效的版本的多个版本。但到目前为止，我什么也没发现。我不想使用元标记，因为我发现如果您尝试上传图像，它总是会在您完成上传之前刷新。

事实上，除了执行刷新的时间之外，一切正常。我假设并且从逻辑上讲，一旦 PHP 更新函数完成，就应该执行刷新。但到目前为止，我还无法从外部 PHP 获得 Javascipt 刷新功能。从最初的 Javascipt 函数来看，它似乎并没有等待 PHP 完成就从那里调用刷新。换句话说，就像最后几行:

ajaxRequest.open("GET", "AjaxDeleteImage.php" + queryString, true);
ajaxRequest.send(null);
//window.location.reload(true);

你可以在哪里看到我注释掉了重新加载。我在那里尝试过，但它只是杀死了一切。如果需要，我很乐意包含更多代码。也许我的方法太复杂了，如果需要的话有人可以快速踢我。

Answer 1

AJAX 调用是异步的，因此一旦请求发出，脚本的其余部分就会继续执行。这通常是一件好事，否则您的页面将挂起直到 AJAX 完成。

要在 AJAX 请求完成时执行操作，您需要分配一个回调函数。这将在 AJAX 完成时运行。或者更准确地说，当 AJAX 请求状态发生变化时。

我从 W3Schools 中提取了此内容:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //refresh page here or do other cool stuff
    }
}

在您的情况下，您可以将 xmlhttp 更改为 ajaxRequest。

onreadystatechange 属性需要一个函数，只要 AJAX 请求的状态发生变化，就会调用该函数。有 5 种不同的状态，但您感兴趣的是 4，因为这是“我完成了!”状态。上面的函数检查此状态，并检查从服务器返回的 http 状态代码。如果是 200，生活就很好，然后你就可以做你需要做的事情了。应在调用 .send() 之前声明回调。

您还可以检查其他状态代码并做出相应 react (例如，如果存在 404 或 500 状态代码，则弹出错误，或者将页面重置为已知的良好状态，以便用户可以重试)。

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //refresh page here or do other cool stuff
    }
    elseif (xmlhttp.readyState==4 && xmlhttp.status==500)
    {
        //uh oh, something went wrong. Call Batman!
    }
}

顺便说一句，JQuery 等库将 AJAX 功能包装成一些非常易于使用的函数。一个简单的 JQuery 示例:

$.get('myurl.php')
.done(function() {
    alert( "success" );
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "complete" );
});

如您所见，您可以执行 GET 请求并在一个简单的语句中定义所有处理程序。如果您只关心成功，您可以将其缩短为:

$.get('myurl.php', function(){
    alert('success');
});