Django视图无法接收HTML表单输入的问题求助

你的核心问题是前端发送JSON格式请求，但Django的request.POST只能解析表单编码（application/x-www-form-urlencoded或multipart/form-data）的数据，无法直接读取JSON，导致后端拿不到参数，进而触发数据库非空错误或返回None。同时代码还有几处小问题需要修正，以下是分步修复方案：

一、修复前端JS代码 #

去掉不必要的JSON转换，直接用FormData发送请求（和原生表单行为一致），同时补全未定义的输出文本框变量：

const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

document.addEventListener('DOMContentLoaded', () => {
    const myForm = document.querySelector('#translate-form');
    // 绑定输出文本框（需确保HTML中存在该id）
    const outputTextArea = document.getElementById('output-text-area');
    
    myForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // 直接使用FormData，无需转JSON
        const formData = new FormData(e.target);

        fetch('/translator/', {
            method: 'POST',
            body: formData,
            headers: { 
                'X-CSRFToken': csrfToken
                // 不要手动设置content-type，FormData会自动处理正确的编码
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(data => {
            console.log(data);
            outputTextArea.value = data.output_text ? data.output_text : `翻译错误: ${data.error}`;
        })
        .catch(err => {
            console.error(err);
            outputTextArea.value = `请求异常: ${err.message}`;
        });
    });
});

二、修复Django视图代码 #

修正Python注释格式，增加参数校验，确保逻辑通顺：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_protect
from django.shortcuts import render
from .models import TranslationRequest

@csrf_protect
def translateText(request):
    if request.method == 'POST':
        # 现在能正确获取表单参数
        source_language = request.POST.get('source_language')
        input_text = request.POST.get('input_text')
        target_language = request.POST.get('target_language')

        # 先校验必填参数是否存在
        if not input_text or not source_language or not target_language:
            return JsonResponse({'error': '缺少必要参数'}, status=400)

        try:
            # 替换为你的实际翻译API调用逻辑
            # 示例：output_text = translation_via_API(source_language, target_language, input_text)
            output_text = "这里是翻译后的结果"  # 临时占位，替换为真实API返回值

            # 保存到数据库
            TranslationRequest.objects.create(
                source_language=source_language,
                target_language=target_language,
                input_text=input_text,
                output_text=output_text
            )

            return JsonResponse({'output_text': output_text})

        except Exception as e:
            error_message = f"发生错误: {str(e)}"
            return JsonResponse({'error': error_message}, status=500)

    return render(request, 'translator/index.html')

三、修复HTML表单结构 #

确保所有表单控件都包裹在<form>标签内，补充缺失的输出文本框：

<form id="translate-form" action="{% url 'translateText' %}" method="post">
    {% csrf_token %}
    <div>
        <label for="input-lang-select"></label>
        <select class="input-lang-select" name="source_language">
            <option value="zh">Chinese</option>
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="de">German</option>
            <option value="jp">Japanese</option>
            <option value="ko">Korean</option>
            <option value="ru">Russian</option>
            <option value="pt">Portugese</option>
        </select>
    </div>

    <textarea id="input-text-area" name="input_text"
              autofocus
              minlength="1"
              maxlength="10000"
              placeholder="Enter text here"></textarea>

    <div class="submit-btn-container">
        <button type="submit" id="submit">Translate</button>
    </div>

    <div class="word-count-div">
        <span class="word-count"><span class="string-count">0</span>/10000</span>
    </div>

    <div class="output-box">
        <div class="output-lang-select-div">
            <label for="output-lang-select"></label>
            <select class="output-lang-select" name="target_language">
                <option value="en">English</option>
                <option value="zh">Chinese</option>
                <option value="es">Spanish</option>
                <option value="de">German</option>
                <option value="jp">Japanese</option>
                <option value="ko">Korean</option>
                <option value="ru">Russian</option>
                <option value="pt">Portugese</option>
            </select>
        </div>
        <!-- 补充输出文本框 -->
        <textarea id="output-text-area" readonly placeholder="翻译结果将显示在这里"></textarea>
    </div>
</form>

四、额外检查项 #

1. 确认TranslationRequest模型中input_text、source_language、target_language字段的非空设置符合需求，现在参数能正常传递，不会触发非空错误。
2. 确保翻译API调用函数translation_via_API能正确返回结果，避免返回None。

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