使用AJAX更改按钮

我已经创建了一个系统，在这个系统中，您可以访问一个地方，并拥有所有代码，允许在使用ajax单击按钮时将条目发布到数据库并从数据库中删除，但我正在努力解决如何在单击按钮时使用ajax更改按钮，这取决于记录是否存在。目前，该按钮仅在页面刷新时更改，尽管AJAX代码用于从数据库中添加或删除。我如何让我的按钮改变并用AJAX响应if语句？以下是我到目前为止的情况：

Html:

@if(Auth::user()->visitors()->where('place_id', $place->id)->first())
      <a class="btn btn-visited visit"  data-id="{{ $place->id }}">I've Visited <i class="fas fa-check"></i></a>
       @else
      <a class="btn btn-not-visited visit"  data-id="{{ $place->id }}">Visited?</a>
@endif

php:

---

如何让按钮响应AJAX？

您想在AJAX成功时更改按钮

因此，在成功函数中插入您想要做的任何事情

$('.visit').on('click', function (event) {
    event.preventDefault();
    $.ajax({
        method: 'POST',
        url: urlVisit,
        data: {
            place_id: $(event.target).data("id"),
            _token: token
        }
    }).done(function() {
        // add button change here
        // select the buttons I'd and manipulate e.g.
       $('#buttonID').html('change');
   });
});

---

Blade是在PHP中运行的，因此您的ajax调用无法响应if语句，除非您在ajax请求中获取该Blade文件

我还强烈建议不要在blade文件中执行您的逻辑。它不遵循MVC逻辑。在控制器中执行此操作，并将其传递到视图中

控制器：

$visited = Auth::user()->visitors()->where('place_id', $place->id)->first():

return view('something')->with('visited', $visited);

然后，在响应Ajax调用的控制器中，返回

true

而不是null。这将是一个成功的响应，然后您可以使用jQuery

done（）

方法交换按钮的文本和类，将其标记为已访问

jQuery示例：

$('.btn.visit').removeClass('btn-not-visited').addClass('btn-visited').html('I\'ve Visited <i class="fas fa-check"></i>');

$（'.btn.visit'）.removeClass（'btn-not-visted'）.addClass（'btn-visted'）.html（'I'vevisted'）；

您描述的最后一位的例子有吗？这种方法很有效，我只需要知道当记录存在于数据库中时如何执行该操作，以及如果记录不存在时如何将其更改回来。啊。首先，我建议分离关注点。您正在使用一个Ajax调用来完成两件不同的事情。也许考虑分开打电话。如果不想这样做，请在不存在时返回false而不是true。然后，您可以在Ajax调用的成功区域中使用JS来确定要做什么。您建议如何执行false和true部分？在数据中添加一个新字段，通过请求将其调用到控制器中，并将其设置为true或false？我不太确定您的意思。。只要决定“假”和“真”是什么意思。例如，创建访问的模型后立即返回true，删除模型后返回false。然后在

done（）

方法中，使用if语句，根据返回的值（true或false）对类和html进行不同的更改。

$visited = Auth::user()->visitors()->where('place_id', $place->id)->first():

return view('something')->with('visited', $visited);

$('.btn.visit').removeClass('btn-not-visited').addClass('btn-visited').html('I\'ve Visited <i class="fas fa-check"></i>');