jQuery：获取图像加载错误的详细信息

Question

我有一个调用服务器端脚本（PHP）的javascript来提供请求的图像。传递了用户和图片键的参数。

如果请求的图像不存在，我会回复404错误。 如果图像存在但用户无权访问它，我会回复403错误。

这是一个简化的代码示例......

$img.error(function () {
        alert("Image not known or access denied.");
    })
    .attr("src", "getimg.php?key=horse&user=fred");

我想根据问题是否与图像密钥一起提供不同的消息，或者是否是用户无权访问。

是否有某种方法可以访问返回的HTTP错误代码或响应中返回的文本？

Answer 1

当你直接在src属性中将url放到PHP脚本时，你的javascript不会意识到获取图像时的任何错误。解决此问题的一种方法是触发图像的AJAX请求：

$.ajax( "getimg.php?key=horse&user=fred" )
 .fail(function(jqXHR) {
    // do something here when the image wasn't loaded
    if(jqXHR.status === 403) {
       // access denied
    } else if(jqXHR.status === 404) {
      // not found
    }
  });

jqXHR对象包含的信息包括抛出的状态代码，服务器的响应等等。更多信息here。

请注意，我只在此处使用.fail()回调，并且在图片加载成功时不执行任何操作。在图像中对AJAX没有多大意义，你仍然可以将src设置为正确的url，并且可以在加载图像时处理所有事情。我们在这里使用AJAX的唯一原因是出现问题。