Django中使用Fetch异步渲染<form>的问题及jQuery转原生JS改造

你遇到的错误核心原因是Fetch API的请求格式与后端预期不匹配，导致后端视图未进入正确的处理分支，最终返回None。虽然刷新后数据正确，但异步交互过程中后端没有收到合法请求，因此抛出错误。结合Django的CSRF验证和表单数据解析规则，以下是具体解决步骤：

1. 先确保后端视图无遗漏分支 #

首先检查你的like_article视图，确保所有代码路径都返回HttpResponse（包括错误分支）。比如：

# views.py
from django.http import JsonResponse
from django.shortcuts import get_object_or_404
from .models import Article

def like_article(request):
    # 只接受POST请求
    if request.method != 'POST':
        return JsonResponse({'status': 'error', 'message': '仅支持POST请求'}, status=405)
    
    article_id = request.POST.get('article_id')
    article = get_object_or_404(Article, id=article_id)
    user = request.user

    # 处理点赞/取消点赞逻辑
    if user in article.likes.all():
        article.likes.remove(user)
        is_liked = False
    else:
        article.likes.add(user)
        is_liked = True
    
    # 必须返回JsonResponse，不能遗漏
    return JsonResponse({
        'status': 'success',
        'like_count': article.likes.count(),
        'is_liked': is_liked
    })

2. 修复前端Fetch请求的关键问题 #

jQuery会自动处理CSRF令牌和表单编码，但Fetch API需要手动配置这两项：

第一步：添加CSRF令牌获取函数 #

在模板的<script>标签中添加获取CSRF cookie的工具函数：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

第二步：编写Fetch请求逻辑 #

假设你的点赞按钮和计数元素在模板中是这样渲染的：

<!-- 模板中的点赞按钮 -->
<button class="like-button" data-article-id="{{ article.id }}">
    {% if user in article.likes.all %}取消点赞{% else %}点赞{% endif %}
</button>
<!-- 点赞计数 -->
<span class="like-count" data-article-id="{{ article.id }}">
    {{ article.likes.count }}
</span>

对应的Fetch请求代码：

document.addEventListener('DOMContentLoaded', function() {
    const likeButtons = document.querySelectorAll('.like-button');
    
    likeButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const articleId = this.dataset.articleId;
            const likeCountEl = document.querySelector(`.like-count[data-article-id="${articleId}"]`);

            // 发送POST请求
            fetch('/articles/like/', {  // 替换成你的实际URL
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `article_id=${encodeURIComponent(articleId)}`
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // 实时更新UI
                    likeCountEl.textContent = data.like_count;
                    if (data.is_liked) {
                        button.classList.add('liked');
                        button.textContent = '取消点赞';
                    } else {
                        button.classList.remove('liked');
                        button.textContent = '点赞';
                    }
                } else {
                    alert(data.message || '操作失败');
                }
            })
            .catch(error => {
                console.error('点赞请求失败:', error);
                alert('网络错误，请稍后重试');
            });
        });
    });
});

3. 关键注意事项 #

• CSRF令牌：必须在请求头中携带X-CSRFToken，否则Django会拒绝请求，导致视图进入未处理分支返回None。
• Content-Type：如果后端用request.POST获取数据，必须设置application/x-www-form-urlencoded，不能用默认的text/plain或application/json（除非后端专门处理JSON格式）。
• 错误处理：Fetch仅在网络错误时触发catch，HTTP状态码错误（如404、405）需要手动判断response.ok。

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