用 FormData 动态收集表单数据，依后端要求转为 URLSearchParams 或 JSON；发请求前设防重复标记，校验响应状态并提示错误；插入列表时防 XSS，空结果友好提示；同步 URL 状态以支持刷新和分享。
直接用 fetch 或 XMLHttpRequest 做多条件筛选，不依赖框架也能干净可控——关键是把表单数据转成 URL 参数或 JSON 体，并让后端能正确解析。
怎么把多个表单字段转成可发送的查询参数
用户勾选分类、输入关键词、选择价格区间，这些值不能硬编码拼接，得动态收集。手动遍历 document.querySelectorAll('input, select, checkbox') 容易漏状态（比如未勾选的 checkbox 默认不提交）。
- 用
new FormData(formElement)最稳：它自动忽略未选中的checkbox和空input，也支持file类型（虽然筛选一般不用） - 如果后端只认 URL 查询字符串（如 PHP 的
$_GET），用new URLSearchParams(formData).toString()转 - 如果后端接收 JSON（如 Node.js + Express），用
Object.fromEntries(formData)转对象再JSON.stringify() - 注意：
FormData对checkbox同名多值会自动合并为数组，但某些后端（如旧版 PHP）可能只取最后一个，此时需后端明确支持数组语法（name="category[]"）
用 fetch 发送筛选请求时怎么避免重复提交和 loading 状态错乱
用户连点两次“筛选”，可能触发两个并发请求，后返回的那个覆盖前一个的结果，导致 UI 显示错误数据。
- 发请求前设一个标记变量，比如
let isFetching = false，开头判断并立即置true，finally里置回false - 禁用筛选按钮时用
button.disabled = true，别只靠 CSS 隐藏或加 opacity，否则键盘仍可触发 - 不要在
then()里直接更新 DOM，先校验响应状态：if (!response.ok) throw new Error(response.status)，否则 500 错误时页面静默卡住 - 错误提示别只写
console.error，至少加个document.getElementById('error-tip').textContent = '服务器忙，请稍后重试'
后端返回数据后怎么安全插入到列表区域
直接 innerHTML = responseHtml 有 XSS 风险；全用 createElement 又太重。折中方案是明确信任后端返回结构，再用模板字符串 + textContent 控制文本内容。
立即学习“前端免费学习笔记（深入）”；
- 如果后端返回的是纯 HTML 片段（如
<div class="item">...</div>），确保该 HTML 已服务端转义，且插入前清空容器：listEl.innerHTML = ''再赋值 - 如果返回 JSON（推荐），遍历数组时对每个字段做
document.createTextNode(item.title)插入，或用el.textContent = item.title防止执行脚本 - 别忘了处理空结果：
if (data.length === 0) listEl.innerHTML = '<p class="empty">没找到匹配商品</p>' - 滚动位置一般不用管，但若筛选后列表变短，用户可能还在原位置看空白区——可加
listEl.scrollIntoView({block: 'nearest'})微调
最易被忽略的是：筛选条件变更时，浏览器地址栏没同步更新，导致用户刷新页面丢失当前状态。如果需要分享链接或支持前进/后退，得手动调用 history.pushState() 更新 URL，并监听 popstate 恢复条件——这部分不是 AJAX 本身的问题，但实际项目里几乎必做。
