在本教程的第三部分,我们实现了待办事项的添加和删除功能。接下来,我们将添加一个表单,用于创建新的待办事项,并利用 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
{% for todo in todos %}
{% partialdef todo-item-partial inline %}
-
{{ todo.title }}
{% endpartialdef %}
{% endfor %}
{% endblock %}
表单的关键代码在于:
-
hx-post="{% url 'tasks' %}":表单将发送 POST 请求到/tasksURL。 -
hx-swap="beforeend"和hx-target="#todo-items":将响应插入到#todo-items元素(ul 列表)的末尾。如果要添加到顶部,可以使用afterbegin。 -
hx-on:after-request="this.reset()":请求完成后重置表单,方便连续添加任务。
效果演示:

乐彼多用户商城系统,采用ASP.NET分层技术和AJAX技术,运营于高速稳定的微软.NET+MSSQL 2005平台;完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质,后台人性化设计,管理窗口识别客户端分辨率自动调整,独立配置的菜单操作锁,使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1
处理缓慢的请求
为了提升用户体验,我们需要处理网络延迟问题。 在 tasks.html 中,我们为提交按钮添加 hx-disable-elt 属性:
对于切换待办事项完成状态的复选框,我们在请求期间使用 hx-on:click 禁用它:
模拟缓慢网络请求后效果:

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

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









