使用 AJAX 更改按钮答案

【问题标题】：Button change with AJAX使用 AJAX 更改按钮
【发布时间】：2026-02-16 10:45:01
【问题描述】：

我创建了一个系统，您可以在其中访问一个地方并拥有所有代码，这些代码允许将条目发布到数据库并在使用 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

AJAX JS：

var token = '{{ Session::token() }}';
var urlVisit = '{{ route('visitss') }}';

$('.visit').on('click', function (event) {
    event.preventDefault();
    $.ajax({
        method: 'POST',
        url: urlVisit,
        data: {
            place_id: $(event.target).data("id"),
            _token: token
        }
    }).done(function() {
        //
    });
});

php:

$place_id = $request['place_id'];
        $place = place::find($place_id);
        $visited = Auth::user()->visitors()->where('place_id', $place_id)->first();

    if($visited == null) {
                $visited = new Visit();
                $visited->user_id = Auth::user();
                $visited->place_id = $place->id;
                $visited->save();
                return null;
            }
        else{

          $visited->delete();
             return null;
        }

如何让按钮响应 AJAX？

【问题讨论】：

标签： ajax laravel laravel-5 laravel-5.4

【解决方案1】：

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

我也强烈建议不要在刀片文件中执行您的逻辑。它不遵循 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>');

【讨论】：

你描述的最后一点有什么例子吗？
那种工作，我只需要弄清楚当记录存在于数据库中时如何做到这一点，以及如果它不存在如何将其更改回来。
啊。首先，我建议关注点分离。您正在使用一个 Ajax 调用来做两件不同的事情。也许考虑单独打电话。如果您不想这样做，请在不存在时返回 false 而不是 true。然后你可以在你的 Ajax 调用的成功区域使用 JS 来确定要做什么。
你会如何建议做虚假和真实的部分？通过请求向控制器中调用它的数据添加一个新字段并将其设置为真或假？
我不太确定你的意思.. 只需决定 false 和 true 的含义。例如，创建访问模型后返回true，删除后返回false。然后在你的 done() 方法中，有一个 if 语句，根据返回的值（真或假）不同地更改类和 html。

【解决方案2】：

您想从 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');
   });
});

【讨论】：