使用 HTMX 和 Django 实现点击按钮后动态更新
本文旨在指导开发者如何利用 HTMX 库和 Django 框架，实现在点击按钮后动态更新按钮状态的解决方案。我们将详细介绍 HTMX 代码的编写，然后 Django 视图函数的实现，以及如何通过 JSON 响应传递数据，最终实现按钮状态的无刷新更新。重点 HTMX 替换元素后 JavaScript 无法引用正确元素的问题，并提供完整的解决方案。 HTMX 表单
首先，我们需要创建一个包含按钮的表单，并使用 HTMX 的 hx-post 属性指定表单提交的 URL。hx-swap 属性控制如何更新页面内容。lt；form id=quot；follow-formquot； hx-post=quot；{ url 'main：follow_toggle' account.id }quot； hx-swap=quot；outerHTMLquot；gt； { csrf_token } { 如果 request.user 在 account.followers.all } lt；按钮类型=”；提交”； id=”；关注按钮”； class=”；btn btn-二级圆丸”；gt；三元组；/buttongt； { else } lt；按钮类型=”；提交”； id=”；关注按钮”； class=”；btn btn-成功rounded-pillquot；gt；עקובlt；/buttongt； { endif }lt；/formgt；登录后复制
在这个例子中，表单提交到main：follow_toggle视图，把整个表单（outerHTML）替换为服务器返回的内容。另外Django视图
接下来，我们需要创建一个Django View来处理表单提交，并返回更新后的按钮状态。重要的是，View应该返回一个JSON响应，包含指示用户是否正在关注的标志。
from django.shortcuts import get_object_or_404from django.http import JsonResponsefrom django.views import genericfrom .models import Account# 假设 Account 模型在当前目录下class FollowToggleView(generic.View)：def post(self，request，account_id)：user_to_toggle = get_object_or_404(Account，id=account_id)is_following = user_to_toggle in request.user.following.all()if is_following：request.user.unfollow(user_to_toggle)is_following = Falseelse：request.user.follow(user_to_toggle)is_following = True# 构建新的按钮 HTMLif is_following：button_html = 'lt；button type=quot；submitquot；id=quot；follow-buttonquot； class=quot；btn btn-secondary rounded-pillquot；gt；עוקבlt；/buttongt；' else：button_html = 'lt；button type=quot；submitquot； id=quot；follow-buttonquot； class=quot；btn btn-success rounded-pillquot；gt；עוקבlt；/buttongt；' # 返回更新后按钮的形式 form_html = f'lt；form id=quot；follow-formquot； hx-post=quot；{request.path}quot； hx-swap=quot；outerHTMLquot；gt；{request.csrf_token}{button_html}lt；/formgt；' return JsonResponse({'form'： form_html}）登录后复制
在此视图中，我们首先检查用户是否已经关注了目标账户。然后，我们切换关注状态，并构建包含更新后按钮的完整表单 HTML。最后，我们返回一个 JSON 响应，其中包含表单的 HTML 代码。注意，我们使用 request.path 作为 hx-post 的值，这样就会将表单提交到相同的 URL。
GemDesign
AI高保真原型设计工具 16 查看详情 JavaScript 代码
现在，我们需要编写 JavaScript 代码来处理 HTMX 的 htmx：afterSwap 事件，并在按钮状态更新后，更新按钮的文本和类。document.addEventListener('htmx：afterSwap'， (event) =gt； { // 找到 const form = event.target； if (form.id === 'follow-form') { // 找到按钮 const followButton = form.querySelector('#follow-button')； if (followButton) { // 根据按钮的类决定文本 if (followButton.classList.contains('btn-secondary')) { followButton.innerText = 'עוקב'； } else { followButton.innerText = ' '； } } }})；后复制
代码首先监听htmx：afterSwap事件。当事件触发时，它会检查事件的目标元素是否是follow-form表单。如果是，它会找到表单内的follow-button按钮，并根据按钮的类更新按钮的文本。
重要提示：事件委托：由于HTMX可能会替换整个表单，因此直接通过document.logingetElementById获取按钮引用可能会失效。建议使用事件委托，即在htmx：afterSwap事件中重新查询按钮元素。JSON响应：确保Django视图返回的JSON响应，并且包含足够的信息来更新按钮状态。CSRF令牌：在更新后的表单中包含CSRF令牌，以防止CSRF攻击。hx-swap属性：hx-swap内容属性决定了如何更新页面。在本例中，我们使用outerHTML来替换整个表单。总结
通过结合 HTMX 的无刷新更新能力和 Django 的云端处理能力，我们可以轻松地实现动态更新按钮状态的功能。
关键在于正确处理 HTMX 替换元素后的元素引用问题，并使用 JSON 响应提交数据。遵循以上步骤，你就可以构建一个响应迅速用户体验良好的关注/取消关注功能。
以上就是使用 HTMX 和 Django 实现点击按钮后动态更新的详细，更多请关注乐哥常识网其他相关内容！表单提交 JavaScript django json html csrf 委托事件