使用 jQuery 检查链接是否仍然有效答案

【问题标题】：Use jQuery to check if links still work使用 jQuery 检查链接是否仍然有效
【发布时间】：2012-10-29 21:19:16
【问题描述】：

我创建了一个快速功能，使用 AJAX 检查页面上的每个链接，看看它们是否仍然有效。这似乎有效，但它为每个人添加了成功和错误类。如何让错误回调函数仅在 AJAX 响应为 404 时才抛出？

$('li').each(function(){
    $(this).children('a').each(function(){
        $.ajax({
            url:$(this).attr('src'),
            success:$(this).addClass('success'),
            error:$(this).addClass('error')
        })
    })
});

【问题讨论】：

标签： javascript jquery ajax http-status-code-404

【解决方案1】：

success 和 error 参数期望函数。

您需要将代码包装在匿名函数中：

//there's no need to complicate things, use one call to each()
$('li > a').each(function () {
    var $this;
    $this = $(this); //retain a reference to the current link
    $.ajax({
        url:$(this).attr('href'), //be sure to check the right attribute
        success: function () { //pass an anonymous callback function
            $this.addClass('success');
        },
        error: function (jqXHR, status, er) {
            //only set the error on 404
            if (jqXHR.status === 404) { 
                $this.addClass('error');
            }
            //you could perform additional checking with different classes
            //for other 400 and 500 level HTTP status codes.
        }
    });
});

否则，您只是将success 设置为$(this).addClass('success'); 的返回值，这只是一个jQuery 集合。

【讨论】：

谢谢，我仍然有一个奇怪的问题，虽然他们会以 200 响应但仍然抛出错误，因为它们在 Firefox 的控制台中是红色的。您可能知道为什么会这样吗？这是一个链接：testwww.chicagobooth.edu/links_test.html
除非您使用 JSONP 请求，否则您无法发出跨域请求。这是一个same origin policy 问题。此外，您应该使用 console.log 而不是 alert，并在 JavaScript 控制台中查看消息。
是的，我通常使用console.log 我只是在快速解决这个问题，哈哈。现在让我看看 JSONP。
JSONP 不会做我认为你希望它做的事情。你不能用它来抓取 HTML 页面。它用于与不同服务器上的 JSON 数据进行交互。
哦，我想了这么多，尽管哈哈，我正在拼凑这个想法。不过感谢您的洞察力！

【解决方案2】：

首先您需要一个成功和失败的处理程序，现在代码只针对每个链接运行。您不需要 src 属性，而是 href 属性。

这应该可行：

$('li').each(function(){
   $(this).children('a').each(function(){
    $.ajax({
        url:$(this).prop('href'),
        success:function(){$(this).addClass('success')},
        error:function(){$(this).addClass('error')}
    })
  })
});

我还发现在每个循环中使用索引和值更优雅，所以：

$('li').each(function(){
   $(this).children('a').each(function(index,value){
    $.ajax({
        url:$(value).prop('href'),
        success:function(){$(value).addClass('success')},
        error:function(){$(value).addClass('error')}
    })
  })
});

【讨论】：

酷，以前从未听说过“道具”……好！ +1
@andrux，如果你不知道 jQuery 中有哪些方法可用，那么你应该review the api。
@zzzzBov 感谢您的评论，但“评论”并不意味着我会知道 jQuery 中可用的所有方法，除非我真的有那种可用的时间 - 我没有
@zzzzBov 我明白你的意思，感谢您的评论，退出此评论线程

【解决方案3】：

其他答案为所有错误添加了类，如果你真的想要它用于404，那么应该这样做：

$(this).children('a').each(function(){
    var self;
    self = this; //retain a reference to this
    $.ajax({
        url:$(this).attr('src'),
        success: function () { //pass an anonymous callback function
            $(self).addClass('success');
        },
        statusCode: {
           404: function() {
              $this.addClass('error');
           }
        }
    });
});

【讨论】：

【解决方案4】：

您需要将成功和错误回调封装在 function() 调用中：

$('li').each(function(){
    $(this).children('a').each(function(){
        var $this = $(this);
        $.ajax({
            url:$this.attr('href'),
            success: function() {
                $this.addClass('success');
            },
            error: function() {
                $this.addClass('error');
            }
        });
    });
});

【讨论】：