Django中main.js发JSON数据到视图更新数据库遇404错误

核心问题分析 #

你遇到的404 (Not Found)错误，根源是前端请求的URL和后端处理POST请求的视图URL不匹配：

• 前端sendJsonToServer函数硬编码的请求地址是/workshop-master-view/
• 但后端负责处理JSON数据的视图ProcessJsonView对应的URL是/process_json/（若该路由属于management应用，完整路径应为/management/process_json/）

修复步骤 #

1. 修正前端请求URL #

把sendJsonToServer里的fetch地址改成后端process_json的正确路径。推荐用Django模板的{% url %}标签生成URL，避免硬编码：

首先在模板中注入URL到JS：

<script>
const PROCESS_JSON_URL = "{% url 'process_json' %}";
</script>

然后修改JS函数：

function sendJsonToServer(data) {
    const csrftoken = getCookie('csrftoken');

    fetch(PROCESS_JSON_URL, {  // 使用模板生成的正确URL
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.json();
        }
    })
    .then(data => {
        if (data) {
            console.log('操作成功:', data);
        }
    })
    .catch((error) => {
        console.error('操作失败:', error);
    });
}

若必须硬编码URL，需确保路径与urls.py配置完全一致。

2. 移除不必要的csrf_exempt装饰器 #

你的ProcessJsonView使用了@method_decorator(csrf_exempt)，但前端已正确携带X-CSRFToken请求头，这个装饰器可移除以提升安全性：

class ProcessJsonView(View):
    # 移除这行：@method_decorator(csrf_exempt, name='dispatch')
    def dispatch(self, *args, **kwargs):
        return super().dispatch(*args, **kwargs)

    def post(self, request, *args, **kwargs):
        try:
            data = json.loads(request.body)

            date_str = data.get('date')
            date_obj = datetime.strptime(date_str, '%Y-%m-%d').date()
            rooms = data.get('rooms', [])

            for room in rooms:
                room_name = room.get('name')
                time_slots = room.get('time_slots', {})

                workshop_space = WorkshopSpace.objects.get(workshop_space_number=room_name)

                for time_slot, user_data in time_slots.items():
                    if user_data != 0:
                        user_id = user_data['user']['user_id']
                        user = CustomUser.objects.get(username=user_id)

                        WorkshopSpaceRequest.objects.update_or_create(
                            workshop_space=workshop_space,
                            date=date_obj,
                            time_block=time_slot,
                            defaults={
                                'user': user
                            }
                        )
                    else: 
                        WorkshopSpaceRequest.objects.filter(
                            workshop_space=workshop_space,
                            date=date_obj,
                            time_block=time_slot
                        ).delete()

            return HttpResponseRedirect(f'/management/workshop_master/?datum={date_str}')

        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)}, status=400)

3. 优化前端数据传递方式 #

当前端从data-context属性解析JSON时，手动替换单引号为双引号容易出错。推荐用Django的json_script模板标签传递数据：

在模板中：

{{ data|json_script:"schedule-data" }}
<div id="schedule-container"></div>

前端获取数据的逻辑修改为：

document.getElementById('confirm-button').addEventListener('click', () => {
    const dataElement = document.getElementById('schedule-data');
    let data;
    try {
        data = JSON.parse(dataElement.textContent);
    } catch (error) {
        console.error('解析JSON数据失败:', error);
        return;
    }

    sendJsonToServer(data);
});

额外检查点 #

• 确认process_json的URL配置未被其他路由覆盖
• 在浏览器开发者工具的Network标签中查看请求的完整URL，确保与后端配置一致

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