如何通过AJAX实现访问状态按钮的动态切换（无需刷新页面）

嘿，这个问题其实很好解决！核心思路就是在AJAX请求完成后，手动更新按钮的文本、样式和状态，不用等页面刷新。我帮你一步步修改现有代码：

第一步：优化PHP后端，返回明确状态标识 #

首先，咱们让PHP返回一个清晰的状态，告诉前端这次操作是添加了访问记录还是删除了，这样前端能更准确地切换按钮状态：

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

if($visited == null) {
    $visited = new Visit();
    $visited->user_id = Auth::user()->id; // 这里你之前漏了->id，必须修正，不然会报错！
    $visited->place_id = $place_id;
    $visited->save();
    return response()->json(['status' => 'added']); // 返回添加成功的状态
} else{
    $visited->delete();
    return response()->json(['status' => 'removed']); // 返回删除成功的状态
}

第二步：修改AJAX回调，实时切换按钮状态 #

接下来，在AJAX的done回调里，根据后端返回的状态，直接更新按钮的类和内容：

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

$('.visit').on('click', function (event) {
    event.preventDefault();
    var $btn = $(this); // 保存当前点击的按钮对象，避免后续DOM查找出错
    var placeId = $btn.data("id"); // 直接从按钮取data-id，比event.target更可靠

    $.ajax({
        method: 'POST',
        url: urlVisit,
        data: {
            place_id: placeId,
            _token: token
        }
    }).done(function(response) {
        // 根据后端返回的状态切换按钮
        if(response.status === 'added') {
            // 切换为已访问状态
            $btn.removeClass('btn-not-visited').addClass('btn-visited');
            $btn.html("I've Visited <i class='fas fa-check'></i>");
        } else if(response.status === 'removed') {
            // 切换为未访问状态
            $btn.removeClass('btn-visited').addClass('btn-not-visited');
            $btn.html("Visited?");
        }
    }).fail(function() {
        // 可以加个错误提示，提升用户体验
        alert('Oops, something went wrong! Please try again.');
    });
});

💡 为什么用$(this)而不是event.target？因为如果用户点击的是按钮里的<i>图标，event.target会是那个<i>标签，而不是按钮本身，用$(this)能确保我们拿到的是触发点击事件的.visit按钮。

额外优化：简化初始HTML（可选） #

你原来的HTML用了@if判断输出两个不同的按钮，其实可以简化成一个按钮，用Blade语法动态设置类和内容，代码更简洁：

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

这里用exists()代替first()，因为我们只需要判断是否存在记录，不需要取出整条数据，性能会更好一点。

这样修改后，点击按钮就能实时切换状态啦，不用再刷新页面~

内容的提问来源于stack exchange，提问作者detinu20