HTMX 基於伺服器中心的網頁開發哲學，提供與客戶端的動態響應。本篇將探討如何使用 Django 實現 HTML 返回方式 以及其優缺點。

Illustration of server-rendered HTML responses with Django and HTMX

1. HTML 返回方式是什麼？

HTML 返回方式是指伺服器生成 完整的 HTML，並將其傳送給客戶端進行渲染。客戶端可以在沒有額外 JavaScript 的情況下更新動態 UI。這種方式符合 HTMX 的基本哲學，也便於簡單實作。

2. HTML 返回方式的優點

  • 無需 JavaScript：由伺服器返回完整的 HTML，因此客戶端邏輯變得簡單。
  • 直觀且快速：客戶端只需將返回的 HTML 插入目標元素即可。
  • 利用 Django 模板：自然整合 Django 的模板系統。

3. 利用模板渲染的 HTML 返回

對於複雜的 UI 或重複使用的 HTML 片段，最好使用獨立的模板檔案來管理。可以使用 Django 的 render 方法進行返回。

例子：處理註冊錯誤訊息

Django 視圖
from django.shortcuts import render

def signup_view(request):
    if request.method == "POST":
        username = request.POST.get("username", "").strip()
        password = request.POST.get("password", "")
        password2 = request.POST.get("password2", "")

        errors = []
        if not username:
            errors.append("請輸入帳號！")
        if password != password2:
            errors.append("密碼不一致！")

        if errors:
            return render(request, "partials/error_messages.html", {"errors": errors})

        return render(request, "partials/success_message.html", {"message": "註冊成功！"})
HTML 模板 (partials/error_messages.html)
{% for error in errors %}

{{ error }}

{% endfor %}
HTML 模板 (partials/success_message.html)
{{ message }}

利用模板渲染可大幅提升程式碼的重用性和維護性。

4. 簡單的 HTML 響應：使用 HttpResponse

如不需要複雜的模板，可以直接通過 Django 的 HttpResponse 返回簡單的 HTML 響應。

例子：簡單的狀態訊息

Django 視圖
from django.http import HttpResponse

def signup_view(request):
    if request.method == "POST":
        username = request.POST.get("username", "").strip()
        password = request.POST.get("password", "")
        password2 = request.POST.get("password2", "")

        if not username:
            return HttpResponse("
請輸入帳號！
")
        if password != password2:
            return HttpResponse("
密碼不一致！
")

        return HttpResponse("
註冊成功！
")

此方式適合快速進行簡單的狀態消息或 UI 更新，無需使用模板檔案。

5. HTML 返回方式的限制

  • 模板管理複雜性：若 HTML 片段增多，模板檔案的管理可能會變得困難。
  • 動態數據處理的限制：可能不如 JSON 方式靈活。

結語

HTML 返回方式符合 Django 和 HTMX 的基本哲學，適合簡單且直觀的動態 UI 更新。下一篇將討論 JSON 響應方式 及其在客戶端的應用方法。利用 HTMX 創建更動態的網路應用程式吧！