按钮更改 AJAX

Question

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

Answer 1

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

Answer 2

Blade 在 PHP 中是运行，因此您的 ajax 调用无法响应 if-statement，除非您正在获取 blade ajax 请求中的文件。

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

控制器：

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

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

然后，在响应 Ajax 调用的控制器中，return 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

Button change with AJAX

ajax

laravel

laravel-5

laravel-5.4