Django聊天页面无刷新切换URL并加载内容的实现问题

阿华AIGC实验室

2026-4-22

嗨，我明白你遇到的问题了——用AJAX加载带Django模板标签的内容时，标签被当成纯文本显示，这是因为模板标签得靠Django后端渲染成实际HTML，直接返回带标签的片段浏览器根本认不出来。下面给你一套完整的解决方案，一步步来：

第一步：重构Django视图，支持AJAX返回渲染好的片段

首先修改你的视图，让它能区分普通请求和AJAX请求：如果是AJAX请求，只返回聊天内容的渲染片段，而不是整个页面；普通请求则返回完整页面。

from django.shortcuts import render, get_object_or_404
from django.http import JsonResponse
from django.template.loader import render_to_string
from .models import Chat  # 替换成你的聊天模型

def chats_view(request, chat_uuid=None):
    # 先获取通用的聊天列表数据
    chat_list = Chat.objects.all()
    context = {'chat_list': chat_list}

    if chat_uuid:
        # 获取选中的聊天记录，不存在就返回404
        selected_chat = get_object_or_404(Chat, uuid=chat_uuid)
        context['selected_chat'] = selected_chat

        # 判断是否是AJAX请求
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 渲染聊天内容的模板片段，返回JSON格式的HTML
            chat_html = render_to_string(
                'chats/chat_content.html',
                context,
                request=request  # 传递request让模板能访问request相关变量
            )
            return JsonResponse({'html': chat_html})
        
        # 非AJAX请求返回完整页面
        return render(request, 'chats/chats.html', context)
    else:
        # 没有chat_uuid，只返回聊天列表的完整页面
        return render(request, 'chats/chats.html', context)

第二步：拆分模板，分离列表和内容片段

把主页面模板和聊天内容模板分开，这样AJAX可以单独请求渲染好的内容片段：

主模板 `chats/chats.html`

这里放聊天列表和内容容器，初始状态下如果有选中的聊天就加载内容：

<div class="chat-list-wrapper">
    {% for chat in chat_list %}
        <div class="chat-item" data-chat-uuid="{{ chat.uuid }}">
            {{ chat.title }}  <!-- 替换成你的聊天标题字段 -->
        </div>
    {% endfor %}
</div>

<div id="chat-content-container">
    {% if selected_chat %}
        {% include 'chats/chat_content.html' %}
    {% endif %}
</div>

聊天内容片段模板 `chats/chat_content.html`

这里可以正常使用Django模板标签，后端会提前渲染好：

<div class="chat-content">
    <h3>{{ selected_chat.title }}</h3>
    <div class="messages">
        {% for message in selected_chat.messages.all %}
            <div class="message">
                <span class="sender">{{ message.sender.username }}</span>
                <p>{{ message.content }}</p>
                <span class="time">{{ message.created_at|date:"H:i" }}</span>
            </div>
        {% empty %}
            <p>还没有消息，先发一条吧！</p>
        {% endfor %}
    </div>
    <!-- 消息输入框可以放在这里 -->
    <form class="message-form">
        <input type="text" placeholder="输入消息..." />
        <button type="submit">发送</button>
    </form>
</div>

第三步：前端JS实现无刷新切换和URL更新

写JavaScript代码处理聊天项的点击事件，发送AJAX请求获取内容，同时更新浏览器URL（用history.pushState），还要处理浏览器的前进后退：

document.addEventListener('DOMContentLoaded', function() {
    const chatItems = document.querySelectorAll('.chat-item');
    const contentContainer = document.getElementById('chat-content-container');

    // 获取CSRF令牌（Django需要这个验证请求，GET请求也建议带上）
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');

    // 给每个聊天项绑定点击事件
    chatItems.forEach(item => {
        item.addEventListener('click', function() {
            const chatUuid = this.dataset.chatUuid;
            const targetUrl = `/chats/${chatUuid}/`;

            // 发送AJAX请求
            fetch(targetUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': csrftoken
                }
            })
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(data => {
                // 更新内容容器
                contentContainer.innerHTML = data.html;
                // 更新URL，不刷新页面
                history.pushState({ chatUuid: chatUuid }, '', targetUrl);
            })
            .catch(error => console.error('加载聊天失败:', error));
        });
    });

    // 处理浏览器前进后退
    window.addEventListener('popstate', function(event) {
        if (event.state && event.state.chatUuid) {
            // 回到选中聊天的URL，重新加载内容
            const targetUrl = `/chats/${event.state.chatUuid}/`;
            fetch(targetUrl, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': csrftoken
                }
            })
            .then(response => response.json())
            .then(data => contentContainer.innerHTML = data.html);
        } else {
            // 回到/chats/，清空内容容器
            contentContainer.innerHTML = '';
        }
    });
});