jQuery 和数据属性来处理所有 ajax 调用

html
    
    
    
    
Fetch Data

`元素（id为`result`），同时利用`data-*`属性为按钮指定了Ajax调用的相关信息，包括请求的URL、请求方法和响应结果的目标元素。

接下来，让我们通过jQuery来处理这个Ajax调用。

javascript
$(document).ready(function() {
    $('.ajax-trigger').on('click', function() {
        var url = $(this).data('url');
        var method = $(this).data('method');
        var target = $($(this).data('target'));
        $.ajax({
            url: url,
            method: method,
            success: function(data) {
                target.html(data);
            },
            error: function() {
                target.html('Error fetching data.');
            }
        });
    });
});

在这段jQuery代码中，我们通过监听按钮的点击事件，获取按钮上的数据属性，然后使用这些属性配置Ajax请求。成功时，将响应数据插入到指定的目标元素中；失败时，将显示错误消息。

通过这种方式，我们成功地将Ajax调用的配置信息与HTML元素关联使得代码更具可读性和可维护性。这种模式特别适用于具有多个Ajax调用的复杂项目，让代码更加清晰易懂。