为什么我的 Django 视图没有收到来自我的 HTML 表单的输入？

问：

我正在制作一个网站，该网站获取用户文本，对其进行修改并使用Ajax返回响应。我在后端使用 Django，在前端使用 vanilla JS。用户选择 和 ，在 input_text 中输入一些文本，浏览器在output_text文本区域输出翻译。但是，每当我尝试时，我都会在尝试保存到数据库时得到输入文本的output_text（作为我的翻译 API 的输出）或错误，因此我的 django 视图似乎没有检测到输入文本。源语言和目标语言也是如此。当我注释掉代码以将翻译保存到数据库时，我得到的是输出文本。但是，当我检查正在发送的有效负载（在开发人员工具中）时，我会看到输入文本和所选语言。我在 HTML 中使用带有 AJAX 的标签，以防止在用户收到响应时重新加载页面。当我删除所有 JS 时，它按预期工作，但当然，预设是黑屏，需要重新加载页面。这是我的代码：source_languagetarget_languageNoneNo NullNone<form>

JS：

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

document.addEventListener('DOMContentLoaded', () => {
    //const myForm = document.getElementById('translate-form');
    const myForm = document.querySelector('#translate-form');
    myForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        /* Convert form data to JSON */
        let formData = new FormData(e.target);
        formData = formDataToJSON(formData);

        /* Create a new Request object */
        let request = new Request('/translator/', {
            method: 'POST',
            body: formData,
            headers: { 'content-type': 'application/json', 
            'X-CSRFToken': csrfToken
         }
        });

        /* Send the request and wait for response */
        fetch(request)
        .then(response => {
            if (!response.ok) throw new Error('Failed to send request.');
            return response.json();
        }).then(data => {
            /* Do something with data from response */
            console.log(data);
            //let outputTextArea = document.getElementById('translate-form');
            outputTextArea.value = !data.output_text ? `Translation error: ${data.error}` : data.output_text;
        }).catch(console.error);
    });
});

/* Converts FormData to JSON */
function formDataToJSON(formData) {
    let obj = {};
    for (let key of formData.keys()) obj[key] = formData.get(key);
    return JSON.stringify(obj);
}

这是 Django 视图：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_protect
from django.shortcuts import render
from django.http import HttpResponse
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')
        



        try:
            # Call the API for translation logic

            output_text = translation_via_API
            

            # Save the translation to database
            translation_object = 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:
            # Handle API and model save errors here
            error_message = f"An error occurred: {e}"
            return JsonResponse({'error': error_message}, status=500)

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

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

以下是相关的 HTML：

<form id="translate-form" action="{% url 'translateText' %}" method="post">
                        {% csrf_token %}
                        <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>
                            <!-- add more language options as needed -->
                        </select>
                    
                    
                </div>
                    <!--<p class="box-title">Detected language: <span id="detected-language">Detecting...</span></p>-->
                
                    
                        <textarea id="input-text-area" name="input_text"
                        autofocus
                        minlength="1"
                        maxlength="10000"
                        placeholder="Enter text here"></textarea>
                        <!--change min and maxlength-->
                    
                    
                        <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>
                        <!--change max wordcount-->
                    </div>
                
            </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>
                            <!-- add more language options as needed -->
                        </select>
                    
                    </form>

这是我的mysite\urls.py：

```
from django.contrib import admin
from django.urls import include, path
from translator import views

urlpatterns = [
    path('translator/', include('translator.urls')),
    path('admin/', admin.site.urls),
]
```

还有我的翻译\urls.py：

```
from django.urls import path
from . import views

urlpatterns = [
    path("", views.translateText, name = "translateText"),
    ]

```

我来回阅读 Django 文档并尝试了我理解的所有内容，但这没有任何区别。正如我在检查有效负载时所说，我看到每个字段都与相关数据一起发送到后端。