Django+AJAX无刷新点赞按钮异常问题求助

你的核心问题是点击点赞按钮时触发了浏览器默认的页面跳转行为，AJAX代码没有拦截这个动作，导致页面直接跳转到视图返回的JSON结果页。下面是具体修复步骤和代码示例：

1. 阻止默认跳转行为 #

不管你用<form>包裹按钮还是直接使用<button>，都必须在JS点击事件中调用event.preventDefault()，彻底阻止浏览器的默认跳转动作。

2. 正确编写AJAX请求（带CSRF令牌） #

Django对POST请求强制要求CSRF验证，所以AJAX请求必须带上CSRF令牌，同时要确保请求URL和视图路由完全匹配。

示例HTML代码 #

假设页面中的点赞区域结构如下：

<div class="place-card" data-place-id="{{ place.id }}">
  <p>点赞数: <span class="likes-count">{{ place.likes_count }}</span></p>
  <button class="like-btn">点赞</button>
</div>

原生JS实现AJAX #

// 获取所有点赞按钮
const likeButtons = document.querySelectorAll('.like-btn');

likeButtons.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 第一步：阻止默认跳转
    e.preventDefault();
    
    const placeCard = this.closest('.place-card');
    const placeId = placeCard.dataset.placeId;
    const likesCountEl = placeCard.querySelector('.likes-count');
    
    // 第二步：发送AJAX POST请求
    fetch(`/like/${placeId}/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCsrfToken()
      }
    })
    .then(res => res.json())
    .then(data => {
      // 第三步：更新页面点赞数，无需刷新
      likesCountEl.textContent = data.likes_count;
    })
    .catch(err => console.log('点赞出错:', err));
  });
});

// 辅助函数：获取Django的CSRF令牌
function getCsrfToken() {
  let token = null;
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.startsWith('csrftoken=')) {
      token = decodeURIComponent(cookie.split('=')[1]);
      break;
    }
  }
  return token;
}

3. 修正Django视图和路由 #

确保视图只接受POST请求，返回标准JSON格式数据：

views.py #

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .models import Place

@require_POST
def like_place(request, place_id):
    try:
        place = Place.objects.get(id=place_id)
        place.likes_count += 1
        place.save()
        return JsonResponse({'likes_count': place.likes_count})
    except Place.DoesNotExist:
        return JsonResponse({'error': '地点不存在'}, status=404)

urls.py #

添加对应的路由配置：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('like/<int:place_id>/', views.like_place, name='like_place'),
]

常见错误排查 #

• 忘记阻止默认行为：直接导致页面跳转，AJAX代码根本没执行
• 未携带CSRF令牌：Django会返回403 Forbidden错误，可在浏览器控制台查看详情
• 请求URL错误：确保AJAX的URL和urls.py中配置的路由完全一致
• 未更新页面元素：即使请求成功，页面也不会自动显示新的点赞数

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