HTMX是一個可以自然地與Django集成的工具，只需簡單的設置就能構建動態網絡應用。在本篇中，我們將探討 整體準備工作和設置方法，將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的安全整合。請期待！😊