使用JS提交表单到Django接口时出现Error 500问题排查

核心错误原因 #

1. 数据格式不匹配：前端用Content-Type: application/json发送JSON数据，但后端试图通过request.POST.get('edited_task')获取数据——Django的request.POST仅处理表单编码（application/x-www-form-urlencoded）的数据，JSON数据需要从request.body解析。
2. URL构造不严谨：通过切片硬编码URL的方式容易出错，比如主键长度变化时（两位数/三位数），slice(0, -4)会破坏URL结构。
3. 响应格式不匹配：后端返回redirect('home')，但前端fetch调用了response.json()，重定向的响应内容不是JSON，会导致前端解析错误。

修复步骤 #

1. 修正前端URL构造与数据提交格式 #

先修改home.html中的表单，添加预生成的编辑URL：

<form id="textbox_{{ task.pk }}" onsubmit="saveValue(event, '{{ task.pk }}')" method="post" data-url="{% url 'edit' task.pk %}">
    {% csrf_token %}
    <input type="text" id="inputValue_{{ task.pk }}" name="edited_task" placeholder="Update task">
    <input type="submit" value="Submit">
</form>

然后更新JavaScript的saveValue函数，改用表单编码格式提交数据，直接获取预生成的URL：

function saveValue(event, key){
    event.preventDefault();
    const primary_key = key;
    const enteredValue = document.getElementById(`inputValue_${primary_key}`).value;
    // 从表单获取正确的编辑URL
    const url = document.getElementById(`textbox_${primary_key}`).dataset.url;
    
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        // 构造表单格式的数据
        body: new URLSearchParams({
            edited_task: enteredValue
        })
    })
    .then(response => {
        // 后端重定向时直接跳转页面
        if (response.redirected) {
            window.location.href = response.url;
        }
    })
    .catch(error => console.error('Error:', error));
}

2. 后端视图优化（可选，支持无刷新更新） #

如果想要实现无刷新更新任务内容，修改views.py的edit函数，根据请求类型返回不同响应：

import json
from django.http import JsonResponse

def edit(request,pk):
    if request.method == 'POST':
        # 兼容表单和JSON两种提交方式
        if request.content_type == 'application/json':
            data = json.loads(request.body)
            enteredValue = data.get('value')
        else:
            enteredValue = request.POST.get('edited_task')
        
        # 处理空输入的情况
        if not enteredValue:
            return JsonResponse({'status': 'error', 'message': '任务内容不能为空'}, status=400)
        
        get_task = get_object_or_404(Task, pk=pk)
        get_task.task = enteredValue
        get_task.save()
        
        # AJAX请求返回JSON，普通请求重定向
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest' or request.content_type == 'application/json':
            return JsonResponse({'status': 'success', 'task': get_task.task})
        else:
            return redirect('home')

3. 前端无刷新更新DOM（可选） #

如果用了上面的后端优化，前端可以直接更新页面内容，无需刷新：

function saveValue(event, key){
    event.preventDefault();
    const primary_key = key;
    const enteredValue = document.getElementById(`inputValue_${primary_key}`).value;
    const url = document.getElementById(`textbox_${primary_key}`).dataset.url;
    
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: new URLSearchParams({
            edited_task: enteredValue
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            // 更新页面上的任务文本
            document.getElementById(`task_${primary_key}_text`).textContent = data.task;
            // 隐藏编辑表单
            document.getElementById(`textbox_${primary_key}`).classList.add('hidden-textbox');
        } else {
            alert(data.message);
        }
    })
    .catch(error => console.error('Error:', error));
}

验证要点 #

• 确保hidden-textbox类的CSS设置为display: none;
• 测试时打开浏览器控制台，检查请求的URL和提交的数据是否正确
• 若仍有500错误，查看Django日志文件获取具体异常信息

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