Django技术问询：Ajax返回JSON的模板应用及价格筛选实现

其实这个流程核心就是「后端返回JSON数据→前端接收并解析→动态更新页面DOM」，我给你用jQuery举个实操例子（毕竟你示例里用了jQuery）：

1. 让后端视图返回JSON #

首先得调整你的Django视图，让它能处理Ajax请求并返回标准的JSON格式数据：

from django.http import JsonResponse
from .models import Product

def ajax_product_view(request):
    # 按需查询数据，这里以获取商品列表为例，只返回需要的字段
    products = Product.objects.values('id', 'title', 'price')
    # safe=False是因为返回的是列表，默认只允许字典
    return JsonResponse(list(products), safe=False)

别忘了在urls.py里给这个视图配置路由哦。

2. 前端发送请求并更新页面 #

在你的模板里写Ajax逻辑，请求成功后拿到JSON数据，再把它渲染到页面指定位置。比如你想把商品列表放到<div id="product-list"></div>里：

<div id="product-list"></div>
<button id="load-products">加载商品</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#load-products').click(function() {
        $.ajax({
            url: '/ajax/get-products/',  // 对应你配置的路由
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 先清空原有内容
                $('#product-list').empty();
                // 遍历JSON数据，动态生成HTML元素
                $.each(data, function(index, product) {
                    let itemHtml = `<div class="product-item">
                                        <h4>${product.title}</h4>
                                        <p>价格：¥${product.price}</p>
                                    </div>`;
                    $('#product-list').append(itemHtml);
                });
            },
            error: function(xhr, status, error) {
                console.error('加载失败:', error);
            }
        });
    });
</script>

如果你的页面结构更复杂，也可以提前写好Django模板片段（比如product_item.html），或者用前端模板引擎来渲染，核心都是用返回的JSON数据填充DOM。

先提个小问题：你现有视图里objects = Product.objects.filter(title = q)这里的q没定义，应该是用query变量对吧？现在我们一步步改出价格筛选功能：

1. 修改Django视图，支持价格参数 #

我们需要让视图能接收min_price和max_price参数，同时区分普通请求和Ajax请求（普通请求返回完整模板，Ajax请求返回JSON或模板片段）：

from django.http import JsonResponse
from django.shortcuts import render
from .models import Product

def objects_view(request):
    user = request.user
    query = request.GET.get('q', '')  # 给默认值避免空参数报错
    min_price = request.GET.get('min_price')
    max_price = request.GET.get('max_price')

    # 基础查询集合
    objects = Product.objects.all()
    # 处理搜索关键词（用icontains做模糊匹配更实用）
    if query:
        objects = objects.filter(title__icontains=query)
    # 处理价格筛选
    if min_price:
        objects = objects.filter(price__gte=float(min_price))  # gte = 大于等于
    if max_price:
        objects = objects.filter(price__lte=float(max_price))  # lte = 小于等于

    context = {'user': user, 'query': query, 'objects': objects}

    # 判断是否是Ajax请求（通过请求头识别）
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # 两种返回方式选一种：
        # 方式1：返回JSON数据
        product_data = list(objects.values('id', 'title', 'price'))
        return JsonResponse({'products': product_data})
        # 方式2：渲染模板片段（保持页面样式一致更方便）
        # return render(request, 'product_fragment.html', context)

    # 普通请求返回完整模板
    return render(request, 'template.html', context)

如果选方式2，需要新建product_fragment.html，只放商品列表的HTML结构：

{% for obj in objects %}
<div class="product-item">
    <h3>{{ obj.title }}</h3>
    <p>价格：¥{{ obj.price }}</p>
</div>
{% endfor %}

2. 前端实现价格筛选的Ajax逻辑 #

假设你的模板里有价格输入框和确认按钮：

<div class="price-filter">
    <input type="number" id="min-price" placeholder="最低价格">
    <input type="number" id="max-price" placeholder="最高价格">
    <button id="apply-price-changes">应用筛选</button>
</div>
<div id="products-container">
    <!-- 商品列表容器，默认加载初始内容 -->
    {% include 'product_fragment.html' %}
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#apply-price-changes').click(function() {
        // 获取输入的价格值和当前搜索关键词
        let minPrice = $('#min-price').val();
        let maxPrice = $('#max-price').val();
        let currentQuery = '{{ query }}';

        $.ajax({
            url: window.location.href,  // 复用当前页面URL，不用额外配置路由
            type: 'GET',
            data: {
                q: currentQuery,
                min_price: minPrice,
                max_price: maxPrice
            },
            dataType: 'json',  // 如果用模板片段就改成'html'
            success: function(response) {
                // 如果返回的是JSON，动态生成HTML
                $('#products-container').empty();
                $.each(response.products, function(index, product) {
                    let itemHtml = `<div class="product-item">
                                        <h3>${product.title}</h3>
                                        <p>价格：¥${product.price}</p>
                                    </div>`;
                    $('#products-container').append(itemHtml);
                });
                // 如果返回的是模板片段，直接替换内容：
                // $('#products-container').html(response);
            },
            error: function(xhr, status, error) {
                console.error('筛选失败:', error);
            }
        });
    });
</script>

这样用户点击「应用筛选」按钮时，就会把价格参数发送到后端，后端处理后返回数据，前端不用刷新页面就能更新商品列表啦～

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