HTMX是一个可以与Django自然集成的工具，仅需简单设置即可构建动态Web应用程序。本篇将探讨整合Django与HTMX所需的准备工作和设置方法。

Integration of Django and HTMX for dynamic web development

1. 整合HTMX到Django的准备工作

要在Django中使用HTMX，请遵循以下步骤：

1.1 加载HTMX JavaScript库

在HTML模板文件的<head>标签中添加CDN链接。

<script src="https://unpkg.com/htmx.org"></script>

1.2 在Django中使用HTMX属性

HTMX提供多种属性以简化HTTP请求处理。

  • hx-get: 用于发送GET请求的属性
  • hx-post: 用于发送POST请求的属性
  • hx-target: 指定插入服务器响应数据的HTML元素

HTML代码示例

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">获取数据</button>
    <button hx-post="/submit/" hx-target="#result">提交数据</button>
</div>
<div id="result">结果将在这里显示。</div>

2. 处理Django视图和HTMX请求

2.1 处理GET请求

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GET请求处理完成！</p>")

2.2 处理POST请求

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POST请求处理完成！</p>")

2.3 URL映射

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. 使用HTMX集成时的注意事项

3.1 CSRF令牌处理

Django默认启用CSRF保护，因此POST请求时需要CSRF令牌。要在HTMX中处理POST请求，请选择以下两种方法之一：

1. 使用HTML <meta>标签和JavaScript脚本
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>
2. 在HTML <form>标签内部插入{% csrf_token %}
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="请输入姓名">
    <button type="submit">提交</button>
</form>
<div id="result"></div>

关于CSRF令牌处理的更多信息将在下篇中讨论。

3.2 区分HTMX请求

在Django 4.2及以上版本中，可以使用request.htmx属性来区分HTMX请求。

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMX请求
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # 整个页面

4. HTMX与Django集成的整体流程

4.1 完整的HTML示例

<!DOCTYPE html>
<html>
<head>
    <title>HTMX演示</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">GET请求</button>
        <button hx-post="/submit/" hx-target="#result">POST请求</button>
    </div>
    <div id="result">结果将在这里显示。</div>
</body>
</html>

总结

在本篇中，我们探讨了整合Django与HTMX所需的准备工作和设置方法。在下篇中，我们将详细讨论CSRF令牌处理方法，以实现Django与HTMX的安全集成。敬请期待！😊