Django任务添加页面提交按钮无响应，请求排查修复

问题现象 #

在Django项目的任务添加页面点击Submit按钮后无任何响应，该按钮本应将任务添加至任务页面的列表中，页面未显示任何错误，无法确定相关代码是否执行。

相关代码 #

views.py #

from django.shortcuts import render
from django import forms
from django.urls import reverse
from django.http import HttpResponseRedirect

# Create your views here.

class NewTaskForm(forms.Form):
    task = forms.CharField(label="New Task")

# Add a new task:
def index(request):

    # Check if there already exists a "tasks" key in our session

    if "tasks" not in request.session:

    # If not, create a new list
        request.session["tasks"] = []

    return render(request, "tasks/index.html", {
        "tasks": request.session["tasks"]
    })

    def add(request):
    # Check if method is POST
        if request.method == "POST":

        # Take in the data the user submitted and save it as form
            form = NewTaskForm(request.POST)

        # Check if form data is valid (server-side)
            if form.is_valid():

            # Isolate the task from the 'cleaned' version of form data
                task = form.cleaned_data["task"]

            # Add the new task to our list of tasks
                request.session["tasks"] += [task]

            # Redirect user to list of tasks
                return HttpResponseRedirect(reverse("tasks:index"))

        else:

            # If the form is invalid, re-render the page with existing information.
            return render(request, "tasks/add.html", {
                "form": form
            })

    return render(request, "tasks/add.html", {
        "form": NewTaskForm()
    })

add.html 模板 #

{% extends "tasks/layout.html" %}

{% block body %}
    <h1>Add Task:</h1>
    <form action="{% url 'tasks:add' %}" method="post"></form>
       {% csrf_token %}
       {{ form }}
        <input type="submit" value="Submit">   
    </form>
    <a href="{% url 'tasks:index' %}">View Tasks</a>
{% endblock %}

index.html #

{% extends "tasks/layout.html" %}

{% block body %}
    <h1>Tasks:</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task }}</li>
        {% empty %}
            <li>No tasks</li>
        {% endfor %}
       </ul>
    <a href="{% url 'tasks:add' %}">Add a New Task</a>
{% endblock %}

问题排查与修复 #

经排查，存在两处核心问题：

• 问题1：add.html中form标签提前闭合
  原代码里<form action="{% url 'tasks:add' %}" method="post"></form>直接闭合了表单标签，导致{% csrf_token %}、表单字段和提交按钮都不在表单范围内，点击提交时没有任何数据被发送。

  修复后的add.html：

  {% extends "tasks/layout.html" %}
  
  {% block body %}
      <h1>Add Task:</h1>
      <form action="{% url 'tasks:add' %}" method="post">
         {% csrf_token %}
         {{ form }}
          <input type="submit" value="Submit">   
      </form>
      <a href="{% url 'tasks:index' %}">View Tasks</a>
  {% endblock %}
  

• 问题2：views.py中add函数缩进错误
  原代码里add函数被嵌套在index函数内部，导致Django无法路由到该视图函数，点击提交后没有对应的处理逻辑执行。同时修复了else分支未初始化form的问题，避免报错。

  修复后的views.py关键部分：

  # Add a new task:
  def index(request):
      # Check if there already exists a "tasks" key in our session
      if "tasks" not in request.session:
          # If not, create a new list
          request.session["tasks"] = []
  
      return render(request, "tasks/index.html", {
          "tasks": request.session["tasks"]
      })
  
  def add(request):
      # Check if method is POST
      if request.method == "POST":
          # Take in the data the user submitted and save it as form
          form = NewTaskForm(request.POST)
          # Check if form data is valid (server-side)
          if form.is_valid():
              # Isolate the task from the 'cleaned' version of form data
              task = form.cleaned_data["task"]
              # Add the new task to our list of tasks
              request.session["tasks"] += [task]
              # Redirect user to list of tasks
              return HttpResponseRedirect(reverse("tasks:index"))
      else:
          # Initialize empty form for GET requests
          form = NewTaskForm()
  
      return render(request, "tasks/add.html", {
          "form": form
      })
  

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