Django实现无页面刷新实时获取数据库更新数据（无需Channels）

当然可以，不用Django Channels的话，有几种纯前端+Django后端的方案能实现需求，下面是具体实现方式：

1. 短轮询（最简单的实现） #

原理：用JavaScript定时向Django后端发送请求，拉取最新价格，然后更新页面DOM。

后端实现（Django视图） #

from django.http import JsonResponse
from .models import Product # 假设你的价格存在Product模型里

def get_latest_price(request):
    # 这里根据你的业务逻辑获取最新价格，比如取某个商品的当前价格
    product = Product.objects.get(id=1)
    return JsonResponse({'price': float(product.price)})

别忘了在urls.py里配置路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('api/latest-price/', views.get_latest_price, name='latest_price'),
]

前端实现（JavaScript） #

// 获取页面上展示价格的元素
const priceElement = document.getElementById('price-display');

// 定义定时拉取函数
function fetchLatestPrice() {
    fetch('/api/latest-price/')
        .then(response => response.json())
        .then(data => {
            // 更新页面价格，保留两位小数（根据需求调整）
            priceElement.textContent = `$${data.price.toFixed(2)}`;
        })
        .catch(error => console.error('获取价格失败:', error));
}

// 每3秒拉取一次（可根据需求调整间隔）
setInterval(fetchLatestPrice, 3000);

// 页面加载时先执行一次
fetchLatestPrice();

2. 长轮询（减少请求次数） #

原理：前端发送请求后，后端如果没有新数据就保持连接，直到数据更新或超时再返回响应，前端收到响应后立刻发起下一次请求。这种方式比短轮询减少了无效请求的次数。

后端实现（Django视图） #

from django.http import JsonResponse
from .models import Product
import time

def long_poll_price(request):
    last_price = request.GET.get('last_price', None)
    product = Product.objects.get(id=1)
    current_price = float(product.price)
    
    # 如果没有新价格，最多等待10秒
    timeout = time.time() + 10
    while time.time() < timeout:
        if last_price is None or float(last_price) != current_price:
            return JsonResponse({'price': current_price})
        time.sleep(1)
        # 重新查询数据库，避免缓存
        product = Product.objects.get(id=1)
        current_price = float(product.price)
    
    # 超时返回当前价格
    return JsonResponse({'price': current_price})

前端实现（JavaScript） #

const priceElement = document.getElementById('price-display');
let lastPrice = null;

function longPollPrice() {
    let url = '/api/long-poll-price/';
    if (lastPrice !== null) {
        url += `?last_price=${lastPrice}`;
    }
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.price !== lastPrice) {
                priceElement.textContent = `$${data.price.toFixed(2)}`;
                lastPrice = data.price;
            }
            // 立刻发起下一次长轮询
            longPollPrice();
        })
        .catch(error => {
            console.error('长轮询失败:', error);
            // 失败后延迟3秒重试
            setTimeout(longPollPrice, 3000);
        });
}

// 启动长轮询
longPollPrice();

3. SSE（服务器发送事件，更高效的单向推送） #

原理：基于HTTP的单向通信协议，服务器可以主动向客户端推送数据，适合这种只需要服务器更新数据到前端的场景，Django无需Channels就能实现。

后端实现（Django视图） #

from django.http import StreamingHttpResponse
from .models import Product
import time
import json

def sse_price_stream(request):
    def event_stream():
        last_price = None
        while True:
            product = Product.objects.get(id=1)
            current_price = float(product.price)
            if current_price != last_price:
                # SSE格式：data: 内容\n\n
                yield f'data: {json.dumps({"price": current_price})}\n\n'
                last_price = current_price
            time.sleep(1)
    
    # 设置响应头，符合SSE规范
    response = StreamingHttpResponse(event_stream(), content_type='text/event-stream')
    response['Cache-Control'] = 'no-cache'
    response['Connection'] = 'keep-alive'
    return response

前端实现（JavaScript） #

const priceElement = document.getElementById('price-display');

// 创建SSE连接
const eventSource = new EventSource('/api/sse-price-stream/');

// 监听服务器发送的消息
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    priceElement.textContent = `$${data.price.toFixed(2)}`;
};

// 监听连接错误
eventSource.onerror = function(error) {
    console.error('SSE连接错误:', error);
    // 连接断开后尝试重连
    setTimeout(() => {
        eventSource.close();
        // 重新创建连接
        window.location.reload(); // 或者重新初始化EventSource
    }, 5000);
};

方案对比 #

• 短轮询：实现最简单，适合对实时性要求不高（比如5-10秒间隔）、并发量小的场景，但频繁请求会增加服务器压力。
• 长轮询：减少了请求次数，实时性比短轮询好，但服务器需要保持连接，并发高时会占用更多资源。
• SSE：实时性好，服务器主动推送，资源占用合理，适合这种单向数据更新的场景，是三者中最推荐的方案（如果你的Django部署环境支持流式响应）。

内容的提问来源于stack exchange，提问作者Mohawo