关于javascript：以后挂钩进入ajax成功


hook into ajax success later

我正在写一个插件，有一个ajax调用，它向用户显示数据。

如果用户想在ajax上成功添加一些js？ 他可以从他的js脚本中做到这一点，就像瞄准这个ajax成功事件一样。
例如：

1
2
3
4
5
6
7
8
9
 $(document).on('click','button',function(){
    $.ajax({
        url: 'url.php',
        success: function(response){
            /** HOOK HERE **/
            $('.display').html(response);
        }
    })
})

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
        }
    })
})

所以现在你的用户可以这样做：

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

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

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

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

看起来太老了。

如果您希望您的API看起来更现代，并且所有想象都可以模仿jQuery的风格：

1
2
3
4
5
6
7
8
MyPlugin = {
    onAjaxSuccess: null,
    on: function (e_type,callback) {
        if (e_type == 'ajaxSuccess') {
            this.onAjaxSuccess = callback;
        }
    }
};

现在您的用户可以这样做：

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