如何用XMLHttpRequest实现表单提交后仅刷新指定Div内容？

你的代码核心问题是没有将表单的筛选数据发送给后端，后端无法获取筛选条件，自然返回不了过滤后的结果。另外还有几处细节可以优化，以下是具体修复：

1. 修正后的代码 #

document.querySelector('form[name="filters"]').addEventListener('submit', function (e) {
    e.preventDefault();
    // 缓存表单元素，避免重复查询DOM
    const form = this;
    const xhttp = new XMLHttpRequest();
    const action = form.getAttribute('action');
    const list = document.querySelector('.list');

    xhttp.onreadystatechange = function() {
        if (this.readyState === 4) {
            if (this.status === 200) {
                // 解析响应HTML，提取目标列表内容
                const responseDoc = new DOMParser().parseFromString(this.responseText, 'text/html');
                const updatedList = responseDoc.querySelector('.list');
                if (updatedList) {
                    list.innerHTML = updatedList.innerHTML;
                }
            } else {
                // 增加错误日志，方便排查问题
                console.error('请求失败，状态码：', this.status);
            }
        }
    };

    xhttp.open("POST", action, true);
    // 发送表单所有筛选数据
    xhttp.send(new FormData(form));
});

2. 关键修复说明 #

• 传递筛选数据：用new FormData(form)自动收集表单内所有输入项（input、select等），后端能像处理普通表单提交一样获取筛选参数，进而返回过滤后的结果。
• 优化响应解析：改用DOMParser解析响应文本，比responseType="document"兼容性更好，避免部分浏览器的解析异常。
• 增加错误处理：请求失败时在控制台输出状态码，方便排查后端接口或网络问题。
• 减少DOM查询：直接用this指代当前表单，避免重复调用querySelector，提升性能。

3. 后端配合要求 #

确保后端接口：

• 支持接收POST请求的表单数据（比如PHP用$_POST，Node.js需配置express.urlencoded()中间件）
• 根据筛选参数处理后，返回包含更新后.list内容的完整HTML页面；如果后端直接返回.list的innerHTML，前端可简化为list.innerHTML = this.responseText，效率更高

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