当前位置：首页 > 文章列表 > 文章 > 前端 > 无刷新点赞技术实现解析

无刷新点赞技术实现解析

2026-02-13 23:12:52 0浏览收藏

本文深入剖析了传统超链接点赞方式引发的405错误根源，指出用``标签承载写操作属于语义误用，并系统性地提出以语义化`

如何在不触发 HTML 页面跳转和 405 错误的前提下实现无刷新点赞功能

本文介绍如何将依赖 `` 标签的点赞逻辑重构为纯 AJAX 驱动的交互方式，避免 GET 请求被误判为页面导航、消除 405 Method Not Allowed 报错，并保持前端响应与状态同步。

在当前实现中，点赞按钮使用这类超链接，虽配合 event.preventDefault() 阻止了默认跳转，但搜索引擎爬虫或浏览器预加载机制仍可能尝试以 GET 方式访问该 URL，而你的后端路由仅接受 POST /article/{id}（由 postLike 控制器处理），导致返回 405 错误——这是典型的「语义误用」问题：超链接（）天然代表导航，不应承载写操作（如点赞）。

✅ 正确做法：语义化 + 解耦 + 安全交互

1. 替换  为语义中立的或

移除 href 属性带来的副作用，改用 data-* 属性携带业务参数：

<!-- 推荐使用 button（更符合可访问性规范） -->
<button type="button" 
        data-id="{{ $article->id }}" 
        data-type="heart" 
        class="comments-sub-header__item like-button {{ $article->hasLikedToday('heart') ? 'active' : '' }}">
    <div class="comments-sub-header__item-icon-count">{{ $article->getLikeHeartTotal() }}</div>
</button>

<button type="button" 
        data-id="{{ $article->id }}" 
        data-type="finger" 
        class="comments-sub-header__item like-button {{ $article->hasLikedToday('finger') ? 'active' : '' }}">
    <div class="comments-sub-header__item-icon-count">{{ $article->getLikeFingerTotal() }}</div>
</button>

✅ 优势：
消除 href 引发的预加载/爬虫请求；
button[type="button"] 明确表示非提交、非导航行为；
保留 data-id 和 data-type 供 JS 安全读取。

2. 前端 AJAX 改为显式 POST 请求（推荐）

虽然答案中建议改用 GET，但点赞是修改服务端状态的操作，必须使用 POST（或 PATCH/PUT），符合 REST 语义与 CSRF 防护要求：

$('.like-button').on('click', function (e) {
    e.preventDefault();
    const $btn = $(this);
    const articleId = $btn.data('id');
    const type = $btn.data('type');

    // 禁用按钮防重复点击（可选但强烈推荐）
    $btn.prop('disabled', true);

    $.ajax({
        url: `/article/${articleId}/like`, // 统一路由，更清晰
        type: 'POST',
        data: { type: type },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (res) {
            if ($btn.hasClass('active')) return;

            const $counter = $btn.find('.comments-sub-header__item-icon-count');
            const current = parseInt($counter.text()) || 0;
            $counter.text(current + 1);
            $btn.addClass('active');
        },
        error: function (xhr) {
            if (xhr.responseJSON?.message) {
                alert(xhr.responseJSON.message); // 或使用 Toast 提示
            }
        },
        complete: function () {
            $btn.prop('disabled', false);
        }
    });
});

3. 后端路由与控制器适配（关键！）

更新 routes/web.php，注册显式 POST 路由（避免与文章展示页 /article/{id} 冲突）：

// routes/web.php
Route::post('/article/{id}/like', [ArticleController::class, 'postLike'])->name('article.like');

控制器保持不变（已支持 POST），但建议增强健壮性：

public function postLike($id, Request $request)
{
    $article = Article::findOrFail($id); // 使用 findOrFail 替代手动 abort
    $type = $request->input('type');

    if (!in_array($type, ['heart', 'finger'])) {
        return response()->json(['message' => 'Invalid like type'], 400);
    }

    if ($article->hasLikedToday($type)) {
        return response()->json([
            'message' => "You've already liked article {$id} with {$type} today."
        ], 403);
    }

    $cookie = $article->setLikeCookie($type);
    $article->increment("like_{$type}");

    return response()->json([
        'message' => "Liked article {$id} with {$type}.",
        'count' => $article->{"getLike{$type->ucfirst()}Total"}() // 动态获取最新计数（可选）
    ])->withCookie($cookie);
}