前端问题：实现提交按钮每次点击均加载搜索结果且不刷新页面

先帮你拆解下问题的核心：

• 你的myFunction是切换表格显示状态（点一次隐藏，再点一次显示），这就导致第二次点击提交按钮时，它会把之前隐藏的navbar表格又显示出来，覆盖了搜索结果。
• 每次调用displayEmployee都会重复绑定表单的submit事件，多次点击后会积累多个事件回调，容易出奇怪的问题。
• 你的AjaxGet函数里的参数（url、storageLocation）实际上没起到作用，写法有点冗余。

修复步骤与代码 #

1. 先理清显示逻辑：

我们要实现的效果是：

• 页面加载完成时，显示table1和table2，隐藏搜索结果表格searchTableID
• 点击提交按钮时：
  • 如果输入为空，弹出提示并恢复初始表格显示
  • 如果输入有内容，隐藏table1和table2，显示搜索表格，然后通过Ajax加载结果并渲染

2. 修正后的完整代码：

// 页面加载完成后初始化状态与事件绑定
$(document).ready(function() {
    // 初始状态：显示navbar表格，隐藏搜索表格
    $("#table1ID, #table2ID").show();
    $("#searchTableID").hide();

    // 一次性绑定表单提交事件，避免重复绑定
    $("#searchForm").submit(function(event) {
        event.preventDefault();
        displayEmployee();
    });
});

var getNameOfEmployee = document.getElementById('searchBarInputID');

function displayEmployee() {
    const inputValue = getNameOfEmployee.value.trim();
    if (inputValue !== "") {
        // 固定隐藏navbar表格，显示搜索表格
        $("#table1ID, #table2ID").hide();
        $("#searchTableID").show();
        // 调用Ajax加载数据
        AjaxGet(inputValue);
    } else {
        alert("Please enter any name of employee that you wish to know the extension code of!");
        // 输入为空时恢复初始显示状态
        $("#table1ID, #table2ID").show();
        $("#searchTableID").hide();
    }
}

function AjaxGet(employeeName) {
    $.ajax({
        type: "GET",
        url: 'http://localhost:8080/path/' + employeeName,
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
            let txt = "";
            // 遍历返回的员工数据生成表格行
            $.each(data, function(index, value) {
                txt += "<tr><td>" + value.name + "</td><td>" + value.code + "</td></tr>";
            });
            // 更新搜索表格内容，无结果时显示提示
            if (txt !== "") {
                $("#searchTableID tbody").html(txt);
            } else {
                $("#searchTableID tbody").html("<tr><td colspan='2'>No matching employees found</td></tr>");
            }
        },
        error: function() {
            // 处理请求失败的情况
            $("#searchTableID tbody").html("<tr><td colspan='2'>Failed to load employee data</td></tr>");
        }
    });
}

3. 关键改动说明：

• 事件绑定优化：把表单的submit事件绑定放在$(document).ready()里，只绑定一次，避免重复绑定导致的异常。
• 显示逻辑固化：去掉了切换状态的myFunction，直接在displayEmployee里明确控制表格的显示/隐藏，逻辑更清晰。
• 简化Ajax函数：去掉了无用参数，直接传入员工名字，同时添加了error回调处理请求失败的情况，提升用户体验。
• 输入校验优化：用trim()过滤输入的空格，避免用户输入空字符的无效请求。

这样修改后，每次点击提交按钮都会正确显示搜索结果表格，不会再出现第二次点击回到navbar表格的问题，全程无需刷新页面。

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