Resource interpreted as Document but transferred with MIME type text/json:

cause

后端代码:response.setContentType("text/html; charset=UTF-8");
前端代码:把success(Object data, String textStatus, jqXHR jqXHR)data参数当做对象使用,访问其成员属性data.success

错误:
报错Resource interpreted as Document but transferred with MIME type application/json:
意为资源解释为文档,但是(我们)使用了MIME类型 text/json 去传输
且:前端提示增加用户失败(即使后端数据库增加是成功的)。
在这里插入图片描述

resolve

  • 解决分两步:

    • 后端:修改contentTypetext/html,这样不会报错(如题目)。
      success(data)方法内根据data.success执行的程序流程依旧不对。

    • 前端:将string类型的data解析为JS object(使用JSON.parse(text)方法)。
      然后对解析后的对象进行使用。

  • 修改前:

    • 后端:response.setContentType("text/json; charset=UTF-8");
      报错(如题目)。

    • 前端:

$("#fm).form("submit", {
    url: "/InsertUser",
    success: function(data, textStatus, jqXHR) {
        console.log("data: ", data);                // {"success":true, "msg":"新增用户成功"}
        console.log("textStatus: ", textStatus);    // undefined
        console.log("jqXHR: ", jqXHR);              // undefined
        console.log(Object.prototype.toString.call(data));  // [object String]  响应的是字符串
        // 所以data.success为undefined,所以一直会执行else代码块(即使后台增加用户的操作成功)。
        if (data.success) {
            $("#dlg").dialog("close);   // 关闭对话框
            $("#dg).datagrid("reload);  // 重载数据网格
        } else {
            alert("增加用户出错");
        }
    }
});

数据库操作(增加用户)完成,但执行else代码块。。。WHY

  • 修改后:
    • 后端:修改contentTypetext/html,这样不会报错。
      response.setContentType("text/html; charset=UTF-8");
      虽然不报错Resource interpreted as Document but transferred with MIME type application/json:
      但是,就算后台增加用户成功,前端JS依旧执行else代码块(因为data.success未定义)。

那么如何访问到字符串中的success属性?
我觉得有至少两种方法:

对字符串进行正则解析。获取success后面的值
调用JSON.parse(text)将字符串解析为JS对象,然后访问对象的属性。
以下为第二种:

  • 前端:增加步骤,对字符串data解析,得到JS对象。这样可以访问其成员属性。
$("#fm).form("submit", {
    url: "/InsertUser",
    success: function(data, textStatus, jqXHR) {
        console.log(Object.prototype.toString.call(data));  // [object String]
        var obj = JSON.parse(data);     // 把字符串格式的JSON数据解析为JS对象。
        // 这样,obj.success才是读取到了对象的success属性值。
        if (obj.success) {
            $("#dlg").dialog("close);   // 关闭对话框
            $("#dg).datagrid("reload);  // 重载数据网格
        } else {
            alert("增加用户出错");
        }
    }
});

我觉得可能还有一种方法,
后端:response.setContentType("text/html; charset=UTF-8")
其中同时设置了contentTypeCharacterEncoding两个响应头。

contentTypetext/json时,报错(见标题)。
为其他多个值(经测试),也报相似的错。
只有修改为text/html后,不报如题目中的错误。

那么,可能存在一种我还未测试到的内容类型,既可以不报错,又可以直接返回data为对象类型。
这样,只需要修改一点点后端代码。前端代码不变。

后续…

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页