本文旨在指导开发者如何结合 HTMX 和 Django，实现点击按钮后，根据服务器端返回的状态动态更新按钮的显示效果。重点在于解决 HTMX 替换按钮元素后，JavaScript 无法正确引用更新后的按钮的问题，并提供后端 Django 视图的正确实现方式。
前端 HTML 结构
首先，我们需要一个包含按钮的表单。这个表单使用 HTMX 的 hx-post 属性指定提交的 URL，该 URL 对应于 Django 视图。
{% csrf_token %} {% if request.user in account.followers.all %} {% else %} {% endif %}
在这个例子中，按钮的初始状态取决于当前用户是否已关注该账户。
后端 Django 视图
Django 视图负责处理表单提交，更新用户关注状态，并返回包含新状态的 JSON 响应。
import jsonfrom django.http import HttpResponse, JsonResponsefrom django.shortcuts import get_object_or_404from django.views import genericfrom .models import Account # 假设 Account 模型在 .models 中class FollowToggleView(generic.View): def post(self, request, account_id): user_to_toggle = get_object_or_404(Account, id=account_id) is_following = False # 初始化 is_following 变量 if user_to_toggle in request.user.following.all(): request.user.unfollow(user_to_toggle) is_following = False else: request.user.follow(user_to_toggle) is_following = True # 返回 JSON 响应 return JsonResponse({'is_following': is_following})
关键在于，视图应该返回一个 JSON 响应，包含一个 is_following 字段，指示用户是否已关注该账户。 JsonResponse 会自动设置 Content-Type 为 application/json。
前端 JavaScript 代码
JavaScript 代码监听 HTMX 的 htmx:afterSwap 事件，并在表单提交后更新按钮的文本和样式。
document.addEventListener('htmx:afterSwap', (event) => { // 在事件目标中查找按钮 const followButton = event.target.querySelector('#follow-button'); if (followButton) { // 解析 JSON 响应 const response = JSON.parse(event.detail.xhr.response); if (response.is_following) { followButton.innerText = 'עוקב'; followButton.classList.remove('btn-success'); followButton.classList.add('btn-secondary'); } else { followButton.innerText = 'עקוב'; followButton.classList.remove('btn-secondary'); followButton.classList.add('btn-success'); } }});
关键点：
event.target.querySelector(‘#follow-button’): 使用 event.target (即触发事件的元素，这里是 form) 作为上下文来查找 #follow-button。 这确保了即使按钮被 HTMX 替换，也能找到新的按钮元素。JSON.parse(event.detail.xhr.response): 从 event.detail.xhr.response 获取服务器返回的原始字符串，并使用 JSON.parse 将其解析为 JavaScript 对象。错误处理: 增加 if (followButton)判断，确保在按钮存在时才执行后续操作，避免潜在的错误。
注意事项
确保 Django 视图返回的是有效的 JSON 响应，并且包含 is_following 字段。在 JavaScript 代码中使用 event.target.querySelector 查找按钮，以确保即使按钮被 HTMX 替换，也能找到正确的元素。检查服务器返回的 Content-Type 是否为 application/json，否则需要手动解析response。
总结
通过结合 HTMX 和 Django，我们可以轻松实现动态更新按钮状态的功能。关键在于正确处理 HTMX 替换元素后的 JavaScript 引用问题，并确保 Django 视图返回正确的 JSON 响应。 遵循上述步骤，可以有效地构建交互性更强的 Web 应用程序。
以上就是使用 HTMX 和 Django 动态更新按钮状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519430.html
微信扫一扫 
支付宝扫一扫 
