如何实现jQuery AJAX请求在页面加载与导航栏点击时复用？

没问题，咱们把这段AJAX逻辑抽成一个独立函数就能轻松实现复用啦！这样不管是页面初始化加载，还是点击导航栏标签，都能调用同一个函数来刷新表格数据。

步骤1：封装AJAX逻辑为独立函数 #

首先把你的AJAX请求代码封装成一个可调用的函数，这样哪里需要加载数据就调用它就行：

function loadImportantExtensions() {
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/importantExtensions",
        dataType: "json",
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        // 如果需要移除隐藏类，也可以在这里加上：$("#impExtTableID").removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
}

步骤2：页面加载时调用函数 #

保留页面初始化时的调用，确保打开页面就加载数据：

$(document).ready(function(){
    // 页面加载完成后立即加载表格数据
    loadImportantExtensions();
});

步骤3：给导航栏标签绑定点击事件 #

假设你的导航栏标签选择器是#yourNavTabSelector（根据实际HTML结构调整选择器），给它绑定点击事件，触发同一个加载函数：

// 给导航栏标签绑定点击事件
$("#yourNavTabSelector").on("click", function(e){
    e.preventDefault(); // 如果标签是a标签，阻止默认跳转行为
    loadImportantExtensions(); // 调用加载函数
});

完整整合代码 #

把上面三部分整合起来就是最终的代码：

// 封装的加载数据函数
function loadImportantExtensions() {
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/importantExtensions",
        dataType: "json",
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        // $("#impExtTableID").removeClass("hidden"); // 如有需要启用
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
}

// 页面初始化加载
$(document).ready(function(){
    loadImportantExtensions();
    
    // 导航栏标签点击事件（替换成你实际的导航标签选择器）
    $("#yourNavTabSelector").on("click", function(e){
        e.preventDefault();
        loadImportantExtensions();
    });
});

注意事项 #

• 记得把#yourNavTabSelector替换成你实际导航栏标签的CSS选择器（比如标签的ID、类名或者其他选择器）。
• 如果你的导航标签是<a>标签，e.preventDefault()可以阻止它的默认跳转行为，确保只执行数据加载。
• 原来代码里的return false和.responseText其实是多余的，因为我们不需要捕获AJAX的同步返回值，异步请求的结果已经在success回调里处理了，所以可以去掉。

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