“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

在本教程的第三部分，我们实现了待办事项的添加和删除功能。接下来，我们将添加一个表单，用于创建新的待办事项，并利用 htmx 和后端路由处理 POST 请求。

表单效果如下：

处理 POST 请求

创建新待办事项，通常有两种 POST 路由方法：使用单独的路由（例如 /tasks/create）或复用已有的任务列表路由 /tasks。我们选择后者，因为它更符合 RESTful 和超媒体原则，但两种方法都可行。

由于 URL 已定义，我们只需修改 core/views.py 中的任务视图。为了代码简洁，我们将 POST 请求处理代码放在单独的函数中。

def _create_todo(request):  # ...

在 templates/tasks.html 中，我们添加一个新的表单：

{% extends "_base.html" %}
{% load partials %}

{% block content %}

  
{{ fullname }}'s tasks

  

    

      

        
        Add
      
    

    

      {% for todo in todos %}
      {% partialdef todo-item-partial inline %}
      

        
        {{ todo.title }}
      
      {% endpartialdef %}
      {% endfor %}
    
  

{% endblock %}

表单的关键代码在于：

• hx-post="{% url 'tasks' %}"：表单将发送 POST 请求到 /tasks URL。
• hx-swap="beforeend" 和 hx-target="#todo-items"：将响应插入到 #todo-items 元素（ul 列表）的末尾。如果要添加到顶部，可以使用 afterbegin。
• hx-on:after-request="this.reset()"：请求完成后重置表单，方便连续添加任务。

效果演示：

处理缓慢的请求

为了提升用户体验，我们需要处理网络延迟问题。 在 tasks.html 中，我们为提交按钮添加 hx-disable-elt 属性：

Add

对于切换待办事项完成状态的复选框，我们在请求期间使用 hx-on:click 禁用它：

模拟缓慢网络请求后效果：

模拟缓慢网络请求后的动画演示：

至此，我们完成了待办事项创建功能的开发。在第五部分，我们将添加视图层测试。 代码已提交到 GitHub 分支。

好了，本文到此结束，带大家了解了《使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！