如何直接通过URL发起AJAX查询实现商品筛选

1. 解析URL查询参数 #

页面加载时，先提取URL中的筛选参数，比如示例中的urun_marka值：

// 获取URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const targetMarka = urlParams.get('urun_marka'); // 得到marka_36这类目标值

2. 匹配并触发对应复选框的筛选逻辑 #

根据拿到的参数值，找到对应id的复选框，设置选中状态并手动触发筛选事件（因为原有AJAX筛选通常绑定在复选框的change事件上）：

if (targetMarka) {
  const checkbox = document.getElementById(targetMarka);
  if (checkbox) {
    checkbox.checked = true;
    // 手动触发change事件，触发原有AJAX筛选逻辑
    checkbox.dispatchEvent(new Event('change'));
  }
}

3. 支持多参数筛选（可选） #

如果需要同时筛选多个品牌，比如?urun_marka=marka_36&urun_marka=marka_37，可以批量处理：

const targetMarkas = urlParams.getAll('urun_marka');
targetMarkas.forEach(marka => {
  const checkbox = document.getElementById(marka);
  if (checkbox) {
    checkbox.checked = true;
    checkbox.dispatchEvent(new Event('change'));
  }
});

4. 执行时机说明 #

确保代码在DOM加载完成后执行，避免找不到复选框元素：

document.addEventListener('DOMContentLoaded', function() {
  // 上述解析、勾选代码放在这里
});

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