如何改进/缩短这两个类似的 ajax 请求

How can I improve/shorten these 2 similar ajax requests?

本文关键字：两个 请求 ajax 何改进      更新时间：2023-09-26

我的问题很简单。这是我的代码，我发现它们是两个相似的，我如何改进/缩短这段代码？

我

发现它们在很多方面都很相似，这就是我在这里问的原因。

这是我的代码，任何帮助不胜感激。

$(".follow-link").click(function(event) {
    event.preventDefault();
    var therel = $(this).attr('rel');
    var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
    var thisfollow = $(this);
    $.ajax({
        url: '/ajax/follow.php',
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children('.unfollow-link').fadeIn();
            }
        }
    });
});
$(".unfollow-link").click(function(event) {
    event.preventDefault();
    var therel = $(this).attr('rel');
    var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
    var thisfollow = $(this);
    $.ajax({
        url: '/ajax/unfollow.php',
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children('.follow-link').fadeIn();
            }
        }
    });
});

创建一个通用函数，并在该函数中做一些简化的清理工作：

function followAjax(event, sel, phpurl) {
    event.preventDefault();
    var thisfollow = $(this);
    var therel = thisfollow.attr('rel');
    var followID = therel.replace(/[^0-9]/g, '');
    $.ajax({
        url: phpurl,
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide().parent().children(sel).fadeIn();
            }
        }
    });
}
$(".unfollow-link").click(function(event) {
    followAjax.call(this, event, ".follow-link", '/ajax/unfollow.php')
});
$(".follow-link").click(function(event) {
    followAjax.call(this, event, ".unfollow-link", '/ajax/follow.php')
});
您可以在

两个处理程序中使用相同的函数，查找this.className（或使用jQuery：$(this).hasClass）然后执行适当的操作。或者你使用两个函数，在闭包中生成它们：

$(".follow-link").click(makeHandler("follow"));
$(".unfollow-link").click(makeHandler("unfollow"));
function makeHandler(action) {
    return function(event) {
        event.preventDefault();
        var therel = $(this).attr('rel');
        var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
        var thisfollow = $(this);
        $.ajax({
            url: '/ajax/'+action+'.php',
            type: 'POST',
            data: {followwho : followID},
            dataType: 'json',
            success: function(data){
                // no need to ask for data.status
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children(action=="follow"
                    ? '.unfollow-link'
                    : '.follow-link'
                ).fadeIn();
            }
        });
    };
}
相关文章：