为什么我的 AJAX 函数阻止了我页面上的 PHP 标头


Why my AJAX function blocks the header of PHP that I have on my page?

>我正在用PHP(MVC)做一个程序,当我单击视图侧的链接时,我需要从数据库中删除一行。因此,当我单击链接时,将调用以下ajax函数。

var deleteCar = function(id)
{
    $.ajax({
        type: "POST",
        url: "http://localhost/project/car/deleteCar/" + id,
        success: function(response){
        }
   });
}

但我不想发送任何数据,所以这就是我把它放在上面的原因。

然后,在控制器端,我有以下方法:

public function deleteCar($id)
{
    //Here I call the function to delete the Car that I send by id. It works fine.
    header('Location: http://localhost/project/car');
}

如果我直接调用链接上deleteCar的方法而不Ajax标头正常工作,但在同一时刻我使用 Ajax 调用它,我必须刷新页面以查看我修改的内容,我的意思是,Car已被删除。

代码工作正常,只是我不想在 AJAX 函数完成后刷新页面。

提前感谢!

我猜用例是在用户未启用 JS 时允许应用程序工作 - 因此他们只需单击链接即可获得非 AJAX 体验。在这种情况下,您可能希望仅在通过 GET 而不是 POST 请求页面时才重定向。

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    header('Location: http://localhost/project/car');
}

很可能是您要找的。

然后,您必须从成功处理程序中的 DOM 中实际删除代表汽车的元素,如下所示:

var deleteCar = function(id)
{
    $.ajax({
        type: "POST",
        url: "http://localhost/project/car/deleteCar/" + id,
        success: function(response){
            $('#car-row-' + id).remove();
        }
   });
}

(不完全是这样,这取决于页面的HTML如何设置,您将如何准确地执行此操作)。

我相信这里要理解的关键是 - 当你的PHP函数完成时,它已经从数据库中删除了汽车,但浏览器仍然具有最初从页面获得的相同HTML。仅发送 AJAX 请求不会改变这一点。如果您希望浏览器中的 HTML 更改以反映数据库的新状态,则需要执行以下两项操作之一:

  1. 刷新页面,这样PHP就会根据当前的数据库状态重建整个页面
  2. 使用 javascript 更改浏览器中的 HTML,以反映您对数据库状态所做的更改。

它在很多层面上都是错误的,但很难用语言表达。这是微妙的。长话短说 - 将jquery.ajax视为浏览器的另一个虚拟选项卡。当您向服务器发出 ajax 请求时 - 您将创建新的虚拟选项卡。您的 php 标头可能会影响此虚拟选项卡并将其重定向到该标头定义的位置。但它会重定向该虚拟选项卡,而不是您当前的选项卡 - 如果这有意义的话。

你有什么选择?成功时 - 使用纯 JavaScript 进行重定向。

success: function(response){
    location.href = "http://localhost/project/car";
}

这将是解决问题的基本方法。