javascript - 稍后 Hook ajax成功

Question

我正在编写一个插件，有一个ajax调用向用户显示数据。
如果用户想在ajax成功时添加一些js？他可以从他的 js 脚本中做到这一点吗，比如定位这个 ajax 成功事件。
例如:

 $(document).on('click','button',function(){
    $.ajax({
        url: 'url.php',
        success: function(response){
            /** HOOK HERE **/
            $('.display').html(response);
        }
    })
})

现在用户想要将此 alert('User data'); 添加到 ajax 成功调用

Answer 1

你只需要记住函数就像数字、字符串等一样是对象。因此你可以为他提供一个变量来附加一个函数并调用它(如果可用):

MyPlugin = {
    onAjaxSuccess: null
};

$(document).on('click','button',function(){
    $.ajax({
        url: 'url.php',
        success: function(response){
            /** HOOK HERE **/
            if (typeof MyPlugin.onAjaxSuccess == 'function') {
                MyPlugin.onAjaxSuccess(response);
            }
            $('.display').html(response);
        }
    })
})

现在您的用户可以执行以下操作:

MyPlugin.onAjaxSuccess = function (response) {
    console.log(response)
};

等等，我以前在哪里见过这个？

这是一个与老式 DOM .onXXX 回调类似的 API。就像

document.getElementById('myButton').onclick = function () {
    alert('HA');
};

看起来太老派了。

如果您希望您的 API 看起来更现代、更奇特，您可以模仿 jQuery 的风格:

MyPlugin = {
    onAjaxSuccess: null,
    on: function (e_type,callback) {
        if (e_type == 'ajaxSuccess') {
            this.onAjaxSuccess = callback;
        }
    }
};

现在您的用户可以执行以下操作:

MyPlugin.on('ajaxSuccess',function(result){
    console.log(result);
});