如何在Django中接收表单数据并传递给JavaScript？

方案一：AJAX异步提交（无页面跳转） #

通过前端JS拦截表单默认提交行为，发送异步请求，后端处理后返回JSON数据给JS，全程不刷新页面。

1. 前端HTML修改 #

添加CSRF令牌（Django强制要求）和AJAX提交逻辑：

<form id="name-form" action="/your-name/" method="post">
  {% csrf_token %}
  <label for="your_name">Your name: </label>
  <input id="your_name" type="text" name="your_name" value="{{ current_name }}">
  <input type="submit" value="OK">
</form>

<script>
document.getElementById('name-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认页面跳转

  const formData = new FormData(this);
  fetch(this.action, {
    method: 'POST',
    body: formData,
    headers: {
      'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
    }
  })
  .then(response => response.json())
  .then(data => {
    // 此处处理后端返回的数据，示例：打印并弹窗展示
    console.log('处理后的数据:', data);
    alert(`处理结果：${data.processed_name}`);
  })
  .catch(error => console.error('请求失败:', error));
});
</script>

2. 后端views.py修改 #

替换跳转逻辑为返回JSON响应：

from django.shortcuts import render
from django.http import JsonResponse
from .forms import NameForm


def home(request):
    return render(request, 'index.html')


def get_name(request):
    if request.method == "POST":
        form = NameForm(request.POST)
        if form.is_valid():
            # 自定义数据处理逻辑，示例：为名字添加前缀
            processed_name = f"Hello, {form.cleaned_data['your_name']}!"
            return JsonResponse({'processed_name': processed_name})
        # 表单验证失败时返回错误信息
        return JsonResponse({'error': '名字长度不能超过100字符'}, status=400)
    # GET请求返回空表单
    form = NameForm()
    return render(request, "index.html", {"form": form})

方案二：页面刷新后传递数据 #

保留表单跳转逻辑，处理后将数据传递给模板，再由JS读取模板变量。

1. 后端views.py修改 #

处理数据后直接渲染页面并传递结果：

from django.shortcuts import render
from .forms import NameForm


def home(request):
    return render(request, 'index.html')


def get_name(request):
    processed_name = None
    if request.method == "POST":
        form = NameForm(request.POST)
        if form.is_valid():
            processed_name = f"Hello, {form.cleaned_data['your_name']}!"
    else:
        form = NameForm()
    
    return render(request, "index.html", {
        "form": form,
        "processed_name": processed_name
    })

2. 前端HTML修改 #

添加JS代码读取Django传递的模板变量：

<form action="/your-name/" method="post">
  {% csrf_token %}
  <label for="your_name">Your name: </label>
  <input id="your_name" type="text" name="your_name" value="{{ current_name }}">
  <input type="submit" value="OK">
</form>

{% if processed_name %}
<script>
// 读取Django传递的处理结果
const result = "{{ processed_name }}";
console.log('处理后的数据:', result);
alert(result);
</script>
{% endif %}

核心注意事项 #

• 所有POST请求必须携带{% csrf_token %}，否则Django会拦截请求。
• 方案一适合无刷新交互场景，方案二适合简单的页面刷新展示需求。
• 务必保留表单验证逻辑，确保数据合法后再处理。

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