使用 jQuery 检查链接是不是仍然有效
Posted
技术标签:
【中文标题】使用 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')
)
)
);
【问题讨论】:
【参考方案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');
);
);
);
【讨论】:
以上是关于使用 jQuery 检查链接是不是仍然有效的主要内容,如果未能解决你的问题,请参考以下文章