JavaScript 在一个请求中处理不同的 Content-Type

Question

在我的项目中，有一个 URL 通常会响应带有 Content-Type:image/png 的图像，该图像由 Java 使用用户数据动态绘制。

但有时由于某些原因，用户不应该看到图像或无法使用用户数据绘制图像。在这种情况下，服务器将响应包含错误信息的 JSON 结果
Content-Type:application/json; charset=utf-8

这是否可以在服务器响应Content-Type:image/png 时显示图像，否则在服务器响应Content-Type:application/json; charset=utf-8 时警告错误信息？

我可以处理任何一种响应内容类型，但在一个请求中处理两种内容类型时遇到了困难。这可能吗？

---

编辑

我尝试使用 AJAX 之类的

<img id="preview-img"/>

$.ajax({
    url: "/preview",
    type: "GET",
    dataType: "JSON",
    success: function(data) {
        if (!data.success) {
            alert(data.msg);
        }
    },
    error: function() {
        alert("occur error");
    }
});

使用上面的代码，alert(data.msg) 在服务器响应带有错误消息的 JSON 结果时可用，但当服务器响应正确的图像时会触发alert("occur error")。

然后我重试了 remove dataType:

$.ajax({
    url: "/preview",
    type: "GET",
    success: function(data) {
        if (!data.success) {
            alert(data.msg);
        }
    },
    error: function() {
        alert("occur error");
    }
});

很高兴看到success 函数被触发，无论是服务器响应图像还是 JSON
但我不知道如何使用看起来像

的响应数据显示图像

ÿØÿàJFIFÿÛC     
 $.' ",#(7),01444'9=82<.342ÿÛC          
2!!22222222222222222222222222222222222222222222222222ÿÀ%a"ÿÄ    
ÿĵ}!1AQa"q2¡#B±ÁRÑð$3br    
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ 
ÿĵw!1AQaq"2B¡±Á    #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÚ?÷ú(¢
......

一堆垃圾。

---

现在我暂时不处理 JSON 结果

<img id="preview-img"/>

var image = new Image();
image.onload = function () {
    $("#preview-img").attr("src", "/preview");
};
image.onerror = function() {
    alert("could not load image");
};

image.src = "/preview";

Answer 1

请求失败并设置了“dataType”，因为 JQuery 尝试将响应解析为 JSON，但如果服务器使用图像响应则无法这样做。因此调用了错误回调。

在我看来，首选的解决方案是设置 HTTP 代码 != 200（例如 404 表示未找到），以防服务器无法提供图像。在这种情况下将调用错误回调，您可以向用户显示错误对话框。否则，您可以继续在成功回调中显示图像。

关于“我不知道如何显示带有类似响应数据的图像”请看这里：Using jQuery's ajax method to retrieve images as a blob