如何用JavaScript Fetch API接收处理Django返回的JSON响应

没问题，我帮你梳理清楚怎么实现这个功能，分后端Django和前端JavaScript两部分来说：

首先你需要在Django视图里处理请求，返回符合要求的JsonResponse。比如以邮箱是否被占用的检查为例，写一个视图函数：

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from .models import User # 假设你有用户模型

@require_http_methods(["POST"]) # 只允许POST请求，也可以根据需求用GET
def check_email(request):
    # 兼容JSON提交和表单提交两种方式获取邮箱参数
    email = request.POST.get('email') or request.json.get('email')
    is_taken = User.objects.filter(email=email).exists()
    
    # 返回你需要的JSON结构
    if is_taken:
        return JsonResponse({
            'is_taken_email': True,
            'message': '该邮箱已经被注册了哦'
        })
    else:
        return JsonResponse({
            'is_taken_email': False,
            'message': '这个邮箱可以使用'
        })

然后记得在urls.py里配置路由，让前端能访问到这个视图：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('check-email/', views.check_email, name='check_email'),
]

接下来写JavaScript代码，用Fetch API发起请求、接收Django返回的JSON，然后完成对比和提示操作。这里以监听邮箱输入框的失去焦点事件为例：

// 先写一个获取Django CSRF Token的工具函数（POST请求需要这个）
function getCSRFToken() {
    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, 10) === 'csrftoken=') {
                cookieValue = decodeURIComponent(cookie.substring(10));
                break;
            }
        }
    }
    return cookieValue;
}

// 监听输入框事件，发起请求
const emailInput = document.getElementById('email-input');
emailInput.addEventListener('blur', async () => {
    const email = emailInput.value.trim();
    if (!email) return; // 空邮箱就不发起请求了

    try {
        // 发起Fetch请求
        const response = await fetch('/check-email/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCSRFToken(),
                'Content-Type': 'application/json' // 告诉后端我们发的是JSON格式
            },
            body: JSON.stringify({ email: email }) // 把邮箱参数转成JSON字符串
        });

        // 检查请求是否成功（HTTP状态码200-299）
        if (!response.ok) {
            throw new Error(`请求出错，状态码：${response.status}`);
        }

        // 把响应转成JSON对象
        const responseData = await response.json();
        
        // 这里就是你要的「和硬编码JSON对比」的逻辑
        // 比如你硬编码预期邮箱未被占用（is_taken_email为false）
        const expectedData = { is_taken_email: false };
        if (responseData.is_taken_email === expectedData.is_taken_email) {
            alert(`符合预期：${responseData.message}`);
        } else {
            alert(`不符合预期：${responseData.message}`);
        }

        // 如果不需要对比，直接提示返回的消息也可以：
        // alert(responseData.message);

    } catch (error) {
        // 处理网络错误或者后端返回的错误
        alert(`请求失败：${error.message}`);
    }
});

• 如果你的请求是GET方式，不需要CSRF Token，参数可以直接拼在URL里，比如fetch(/check-email/?email=${encodeURIComponent(email)})，后端用request.GET.get('email')获取参数。
• 要确保Django视图里正确处理请求数据：如果是POST+JSON格式，用request.json.get('email')；如果是表单提交，用request.POST.get('email')。
• 可以根据实际场景调整监听事件，比如按钮点击事件（给注册按钮加click监听），而不是输入框的blur事件。

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