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
-
解决分两步:
-
后端:修改
contentType
为text/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
- 修改后:
- 后端:修改
contentType
为text/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")
其中同时设置了contentType
和CharacterEncoding
两个响应头。
当contentType
为text/json
时,报错(见标题)。
为其他多个值(经测试),也报相似的错。
只有修改为text/html
后,不报如题目中的错误。
那么,可能存在一种我还未测试到的内容类型,既可以不报错,又可以直接返回data
为对象类型。
这样,只需要修改一点点后端代码。前端代码不变。
后续…