在 JavaScript 中检测 404 代码答案

【问题标题】：Detecting 404 code in JavaScript在 JavaScript 中检测 404 代码
【发布时间】：2014-05-18 01:33:23
【问题描述】：

我需要能够检测 JavaScript 中丢失的图像。

无法使用服务器上的 PHP，因为 href 是由 JavaScript 计算的。当文件存在时起作用的脚本是：

Data_ID = _DataRow.getDataItem()["Data_ID"];// Picks up the ID of the data
   _HitJPG = document.getElementById("HitJPG");
JPGFileName = _DataRow.getDataItem()["JPGFileName"];
directory = JPGFileName.slice(0, 10);
directory = directory.replace(/-/g, "/");

_HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";

如何在 Div 中设置“InnerHTML”之前检测 HTTP 404 代码？

【问题讨论】：

你可以一直使用 jQuery，其中的ajax 函数很有帮助，并且可以解决跨浏览器问题。
执行 AJAX 请求并等待响应。（你确实不需要这个简单的任务需要 jQuery。）

标签： javascript php

【解决方案1】：

您可以使用onload 和onerror 事件来检测图像是否可以加载

var Data_ID     = _DataRow.getDataItem()["Data_ID"];
var _HitJPG     = document.getElementById("HitJPG");
var JPGFileName = _SETIDataRow.getDataItem()["JPGFileName"];//"2014-04-29T13-36-27.JPG"
var directory   = JPGFileName.slice(0, 10);

directory = directory.replace(/-/g, "/");

var image = new Image();

image.onerror = function() {
    // fail - image not available
}

image.onload = function() {
    // success - image available

    _HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";
}

image.src = "http://77.88.99.54/data/" + directory + "/" + JPGFileName

【讨论】：

甜蜜 - 谢谢你的回答。工作正常

【解决方案2】：

您可以按照上述答案中的说明使用 ajax 调用来尝试此操作。让我给你代码sn-p：

$.ajax({
  url: '<image file name>', // your file name
  success: function(data){
    alert('exists');
  },
  error: function(data){
    alert('does not exist');
  },
})

上面的代码已经在*中给出了其他与javascript相关的问题。您也可以检查一下以进行澄清。

Test if a file exists with javascript

【讨论】：

【解决方案3】：

你可以使用ajax

var jqxhr = $.ajax( "your iamge url" )
.done(function() {
alert( "success" );
})
.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
})
.always(function() {
alert( "complete" );
});

参考http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案4】：

您可以通过 ajax 请求来完成，当您从服务器获得响应时，检查响应 status，例如 javascript/jQuery > 功能：

function fileExists(urlToCheck){
    var fileFound = true;
    $.ajax({
       url: urlToCheck,
       type: "GET",
       success: function(data, textStatus, xhr) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       },
       complete: function(xhr, textStatus) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       } 
    });
    return fileFound;
}

我认为这个功能可以改进很多，通过考虑不同的HTTP响应代码，与404不同的代码，但这并不意味着文件存在于服务器中。

【讨论】：