待办列表网站搜索异常：AJAX获正确数据却显示全量任务

你的核心问题是：AJAX成功获取到了正确的搜索结果，但代码只切换了页面元素的显示状态，没有把新获取的内容替换到对应的容器里。原本searchResults和allHistory容器里还是页面初始加载时的全部任务列表，只是被隐藏/显示，所以不管怎么搜索，看起来都是显示全部任务。

修复后的代码 #

function showSearchResults() {
    // Use AJAX to submit the form asynchronously
    var form = document.getElementById("searchForm");
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open("GET", form.action + "?" + new URLSearchParams(formData).toString(), true);
    xhr.onload = function () {
        console.log('Search Results Received:', xhr.responseText);
        // 关键：将获取到的结果更新到容器中
        document.getElementById("searchResults").innerHTML = xhr.responseText;
        document.getElementById("searchResults").style.display = "block";
        document.getElementById("allHistory").style.display = "none";
    };
    xhr.send();
}

function showAllHistory() {
    // Use AJAX to submit the form asynchronously
    var form = document.getElementById("allHistoryForm");
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open("GET", form.action + "?" + new URLSearchParams(formData).toString(), true);
    xhr.onload = function () {
        console.log('All History Received:', xhr.responseText);
        // 关键：将获取到的结果更新到容器中
        document.getElementById("allHistory").innerHTML = xhr.responseText;
        document.getElementById("allHistory").style.display = "block";
        document.getElementById("searchResults").style.display = "none";
    };
    xhr.send();
}

补充说明 #

• 如果后端返回的是HTML片段（比如直接渲染好的任务列表），上面的代码直接用innerHTML赋值就能正常显示；
• 如果后端返回的是JSON格式数据，你需要先解析数据（JSON.parse(xhr.responseText)），然后通过JavaScript动态生成HTML元素插入到容器中。

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