如何通过Django获取JavaScript价格滑块区间值实现商品筛选

一、修改JavaScript获取滑块值并传递给后端 #

原有的noUiSlider代码需要添加值变化监听，把滑块的起始/结束值传递给后端，下面是两种常用方案：

方案1：通过表单GET提交（刷新页面） #

1. 在商品列表模板中添加隐藏表单，用于存储价格区间值：

<form id="price-filter-form" method="get" action="{% url 'product_list' %}">
  <!-- 隐藏输入框存储价格区间 -->
  <input type="hidden" id="min-price" name="min_price" value="1">
  <input type="hidden" id="max-price" name="max_price" value="100">
  <!-- 手动提交按钮，也可设置自动提交 -->
  <button type="submit" class="btn btn-primary">筛选</button>
</form>

2. 调整main.js代码，监听滑块变化并更新表单值：

// PRICE SLIDER
var slider = document.getElementById('price-slider');
if (slider) {
  noUiSlider.create(slider, {
    start: [1, 100],
    connect: true,
    tooltips: [true, true],
    format: {
      to: function(value) {
        return value.toFixed(2) + '₼';
      },
      from: function(value) {
        // 提取带货币符号字符串中的数字
        return parseFloat(value.replace('₼', ''));
      }
    },
    range: {
      'min': 1,
      'max': 100
    }
  });

  // 监听滑块值变化事件
  slider.noUiSlider.on('update', function(values, handle) {
    // 提取纯数字价格值
    const minPrice = parseFloat(values[0].replace('₼', ''));
    const maxPrice = parseFloat(values[1].replace('₼', ''));
    // 更新隐藏输入框的值
    document.getElementById('min-price').value = minPrice;
    document.getElementById('max-price').value = maxPrice;

    // 若需要滑块拖动时自动提交，取消下方注释
    // document.getElementById('price-filter-form').submit();
  });
}

方案2：AJAX异步刷新（不刷新页面） #

如果希望不刷新页面完成筛选，用AJAX传递参数并更新商品列表：

// PRICE SLIDER
var slider = document.getElementById('price-slider');
if (slider) {
  noUiSlider.create(slider, {
    start: [1, 100],
    connect: true,
    tooltips: [true, true],
    format: {
      to: function(value) {
        return value.toFixed(2) + '₼';
      },
      from: function(value) {
        return parseFloat(value.replace('₼', ''));
      }
    },
    range: {
      'min': 1,
      'max': 100
    }
  });

  // 监听滑块拖动结束事件，避免频繁发送请求
  slider.noUiSlider.on('end', function(values, handle) {
    const minPrice = parseFloat(values[0].replace('₼', ''));
    const maxPrice = parseFloat(values[1].replace('₼', ''));

    // 发送AJAX请求
    fetch(`{% url 'product_list' %}?min_price=${minPrice}&max_price=${maxPrice}`, {
      method: 'GET',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
      credentials: 'include',
    })
    .then(response => response.text())
    .then(data => {
      // 替换商品列表容器的HTML内容（容器id需与模板对应）
      document.getElementById('product-container').innerHTML = data;
    });
  });
}

二、编写Django视图函数处理筛选 #

假设你的商品模型为Product，包含price价格字段，视图逻辑如下：

# views.py
from django.shortcuts import render
from .models import Product

def product_list(request):
    # 从GET请求中获取价格参数，设置默认值
    min_price = request.GET.get('min_price', 1)
    max_price = request.GET.get('max_price', 100)

    # 转换参数为浮点数，处理非法输入
    try:
        min_price = float(min_price)
        max_price = float(max_price)
    except ValueError:
        min_price = 1
        max_price = 100

    # 筛选商品：价格在区间内，并按价格升序排序
    products = Product.objects.filter(
        price__gte=min_price,
        price__lte=max_price
    ).order_by('price')

    # AJAX请求仅返回商品列表片段
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        return render(request, 'products/product_list_fragment.html', {'products': products})
    
    # 正常请求返回完整页面
    return render(request, 'products/product_list.html', {
        'products': products, 
        'min_price': min_price, 
        'max_price': max_price
    })

三、配置URL路由 #

在项目或应用的urls.py中添加对应路由：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('products/', views.product_list, name='product_list'),
    # 其他路由...
]

四、模板文件调整 #

1. 商品列表片段模板（product_list_fragment.html，用于AJAX刷新）：

<div class="product-grid">
  {% for product in products %}
    <div class="product-item">
      <h3>{{ product.name }}</h3>
      <p>价格: {{ product.price }}₼</p>
      <!-- 其他商品展示内容 -->
    </div>
  {% empty %}
    <p>暂无符合条件的商品</p>
  {% endfor %}
</div>

2. 完整页面模板（product_list.html）：

{% extends 'base.html' %}

{% block content %}
  <div id="price-slider"></div>

  <!-- 方案1的筛选表单 -->
  <form id="price-filter-form" method="get" action="{% url 'product_list' %}">
    <input type="hidden" id="min-price" name="min_price" value="{{ min_price|default:1 }}">
    <input type="hidden" id="max-price" name="max_price" value="{{ max_price|default:100 }}">
    <button type="submit">筛选</button>
  </form>

  <!-- 商品列表容器 -->
  <div id="product-container">
    {% include 'products/product_list_fragment.html' %}
  </div>

  <!-- 引入noUiSlider静态资源（需自行下载到项目静态目录） -->
  <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}">
  <script src="{% static 'js/nouislider.min.js' %}"></script>
  <script src="{% static 'js/main.js' %}"></script>
{% endblock %}

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