JavaScript 在一个请求中处理不同的内容类型

Question

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

但有时由于某些原因，用户不应该看到图像或无法使用用户数据绘制图像。在这种情况下，服务器将响应包含错误信息的 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") 会在服务器响应正确的图像。

然后我尝试删除 dataType:

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

很高兴看到 success 函数被触发，无论是服务器响应 Image 还是 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