如何简化JavaScript与AJAX调用，解决多按钮绑定的重复代码问题？

问题根因 #

你在success和error配置项中传入的回调函数加了括号，相当于代码执行到此处时会立即调用这两个函数，再将函数的返回值（此处为undefined）赋值给回调配置，因此和AJAX的请求结果完全无关，才会出现两个函数提前触发的问题。正确写法是去掉括号，直接传入函数名作为回调引用即可。

优化方案 #

你可以通过「统一事件绑定+映射表/自定义属性」的方式实现所有按钮逻辑复用，完全不用为每个按钮单独编写事件处理函数：

方案1：通过HTML自定义属性实现（推荐，后续扩展不需要改JS）

先给所有按钮增加统一的标识类和存储接口路径的自定义属性：

<div style="margin-top: 10px;" class="text-center">
    <h3>Events</h3>
    <button data-api="/api/event/trace" class="btn btn-warning track-btn">TrackTrace()</button>
    <button data-api="/api/event/exception" class="btn btn-warning track-btn">TrackException()</button>
    <button data-api="/api/event/event" class="btn btn-warning track-btn">TrackEvent()</button>
</div>

JS部分只需要写一次绑定逻辑：

// 通用回调函数
function showSuccess(result, status, xhr) {
    $("#message").text("Success").show();
}

function showError(xhr, status, error) {
    $("#error").text("Exception thrown on Backend-API!").show();
}

// 统一绑定所有按钮的点击事件
$(".track-btn").click(function () {
    $.ajax({
        url: $(this).data("api"),
        type: "GET",
        success: showSuccess,
        error: showError
    })
})

方案2：通过映射表实现类似switch的逻辑（不需要改原有HTML）

如果你不想修改现有HTML结构，可以用ID和接口的映射表做匹配，逻辑和switch一致：

const apiMapping = {
    trackTrace: "/api/event/trace",
    trackException: "/api/event/exception",
    trackEvent: "/api/event/event"
}

function showSuccess(result, status, xhr) {
    $("#message").text("Success").show();
}

function showError(xhr, status, error) {
    $("#error").text("Exception thrown on Backend-API!").show();
}

$(".btn-warning").click(function () {
    const currentId = $(this).attr("id");
    // 匹配不到对应接口直接终止执行
    if (!apiMapping[currentId]) return;
    $.ajax({
        url: apiMapping[currentId],
        type: "GET",
        success: showSuccess,
        error: showError
    })
})

两种方案都只需要写一次逻辑，后续新增按钮只需要补充HTML属性或者映射表配置即可，完全符合DRY原则。

内容的提问来源于stack exchange，提问作者Matthias Güntert