簡化 Django 與 HTMX 的動態網頁開發 (第 7 篇)：JSON 返回方式

本篇將探討如何使用 Django 和 HTMX 返回 JSON 數據並在客戶端處理。JSON 方式非常適合以數據為中心的靈活且可擴展的動態網頁應用程式開發。

1. JSON 返回方式是什麼？

JSON 返回方式是指伺服器 僅返回數據，客戶端則解析數據並進行動態處理的方式。Django 提供了 JsonResponse 類別，利用它可以簡單地返回 JSON 數據。

2. JSON 返回方式的優點

• 以數據為中心：伺服器返回數據，客戶端利用這些數據生成所需的 UI。
• 靈活性：客戶端可以自由地處理各種邏輯。
• 代碼管理容易：可以專注於數據處理，而不是複雜的 UI，易於維護。

3. 使用 JSON 數據的示例

以下是一個使用 JSON 數據來處理註冊錯誤消息的簡單範例。

HTML

<form hx-post="/signup/" hx-trigger="submit" hx-target="#form-messages">
    {% csrf_token %}
    <input type="text" name="username" placeholder="用戶名">
    <input type="password" name="password" placeholder="密碼">
    <input type="password" name="password2" placeholder="確認密碼">
    <button type="submit">註冊</button>
</form>
<div id="form-messages"></div>

<script>
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.xhr.status === 200) {
            const response = JSON.parse(event.detail.xhr.responseText);
            const resultDiv = document.querySelector('#form-messages');
            if (response.success) {
                resultDiv.innerHTML = `<p style="color: green;">${response.message}</p>`;
            } else {
                resultDiv.innerHTML = response.errors.map(err => `<p style="color: red;">${err}</p>`).join('');
            }
        }
    });
</script>

Django 視圖

from django.http import JsonResponse

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 JsonResponse({"success": False, "errors": errors})

        return JsonResponse({"success": True, "message": "註冊成功！"})

4. JSON 响應方式的缺點

• 需要 JavaScript：需要編寫代碼來解析 JSON 响應並將其反映到 UI 中。
• 稍微偏離 HTMX 的哲學：HTMX 是一種旨在最小化 JavaScript 使用的工具，因此 JSON 方式需要額外的客戶端邏輯。

5. JSON 响應方式的應用案例

JSON 方式在以下情況下特別有用：

• 以數據為中心的 API 響應
• 複雜的狀態管理與條件式 UI 更新
• 動態數據處理與圖表渲染

總結

本文探討了如何利用 Django 與 HTMX 返回 JSON 數據並在客戶端進行處理。JSON 方式適合以數據為中心的網頁應用程式開發，且具備優秀的靈活性與可擴展性。快在下個專案中試試吧！😊