前端接收后端返回数据中【后端返回数据-dataType属性值】总
结及⽰例
前端jQuery发送ajax请求后，后端controller接收数据并进⾏处理，然后将结果返回给前端的 success : function(data){} 中。
对于不同格式的返回数据，前端 $.ajax() 中要设置对应的 dataType 值，才能保证顺利接收到这些数据。
现将后端返回数据的格式 - dataType 的对应关系整理如下。
参考：blog.csdn/dreamstar613/article/details/61913970
汇总表格
后端返回数据类型$.ajax({}) 中 dataType属性值
html页⾯html / ⽆
Map json / ⽆
Integer json / ⽆
String text / ⽆
实体类Class json / ⽆
实体类数组ArrayList json / ⽆
参考⽂档
dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将⾃动根据 HTTP 包 MIME 信息来智能判断，⽐如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会⽣成⼀个 JavaScript 对象，⽽ script 则会执⾏这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可⽤值:
"xml": 返回 XML ⽂档，可⽤ jQuery 处理。
"html": 返回纯⽂本 HTML 信息；包含的 script 标签会在插⼊ dom 时执⾏。
"script": 返回纯⽂本 JavaScript 代码。不会⾃动缓存结果。除⾮设置了 "cache" 参数。注意：在远程
请求时(不在同⼀个域
下)，所有 POST 请求都将转为 GET 请求。（因为将使⽤ DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使⽤ JSONP 形式调⽤函数时，如 "myurl?callback=?" jQuery 将⾃动替换 ? 为正确的函数名，以执
⾏回调函数。
"text": 返回纯⽂本字符串
⼀、后端返回 html页⾯
前端：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>
<div id="content-wrapper"></div>
<script>
$(document).ready(function () {
$(".layui-btn-normal").click(function () {
/**(1)⽤$("#content-wrapper").html(data)；显⽰页⾯*/
$.ajax({
cache : false,
type : 'POST',
url : '/page/test',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
}
});
});
});
</script>
后端：
@Controller
public class testController {
/
*
* (1)不能有注解@ResponseBody
*/
@RequestMapping(value = "/page/test", method = RequestMethod.POST) public String editAreaWithFile() {
return "test";
}
}
页⾯test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/jquery.min.js"></script>
</head>
<body>
<div>this is the test.html.</div>
<button type="button" class="btn">按钮</button>
<script>
$(document).ready(function () {
$(".btn").click(function () {
alert("点击按钮");
});
});
</script>
</body>
</html>
效果：
⼆、后端返回 Map
前端：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>
<!-- Map -->
<script>
$(document).ready(function () {
$(".layui-btn-normal").click(function () {
$.ajax({
cache : false,
type : 'POST',
url : '/testReturnData2',
// 预期后端返回的数据类型
dataType : "json",
error : function() {
alert('smx失败 ');
},
success : function(data) {
for(var x in data){
console.log("x == " + x);
console.log("data[x] == " + data[x]);
}
}
});
});
});
</script>
后端：
@Controller
public class testController {
/**
* 返回Map
* @return Map
* @前端dataType : "json",
*/
@ResponseBody
@RequestMapping(value = "/testReturnData2", method = RequestMethod.POST) public Map<String, String> testMap() {
//处理参数
HashMap<String, String> map = new HashMap<>();
map.put("name","Tom");
map.put("job","cat");
map.put("age","14");
return map;
}
}
效果：
三、后端返回 Integer
前端：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>
<!-- Integer -->
<script>
$(document).ready(function () {
$(".layui-btn-normal").click(function () {
$.ajax({
cache : false,
type : 'POST',
url : '/testReturnData3',
// 预期后端返回的数据类型
dataType : "json",
error : function() {
alert('smx失败 ');
},
success : function(data) {
alert(data);
}
});
});
});
</script>
后端：
@Controller
public class testController {
/**
* 返回 Integer
* @return Integer
* @前端dataType : "json",
*/
@ResponseBody
@RequestMapping(value = "/testReturnData3", method = RequestMethod.POST) public Integer testInteger() {
//处理参数
return 99;
}
}
效果：
四、后端返回 String
前端：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>
<!-- String -->
<script>
$(document).ready(function () {
$(".layui-btn-normal").click(function () {
$.ajax({
cache : false,
type : 'POST',
url : '/testReturnData4',
// 预期后端返回的数据类型
dataType : "text",
error : function() {
alert('smx失败 ');
},
success : function(data) {
alert(data);
}
});
});
});
</script>
后端：
@Controller
public class testController {
/**
* 返回 String
* @return String
* @前端dataType : "text",
*/
@ResponseBody
jquery ajax例子
@RequestMapping(value = "/testReturnData4", method = RequestMethod.POST) public String testString() {
//处理参数
return "hello";
}
}
效果：
五、后端返回实体类Class
前端：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>
<!-- 实体类  -->
<script>
$(document).ready(function () {
$(".layui-btn-normal").click(function () {
$.ajax({
cache : false,
type : 'POST',
url : '/testReturnData5',
// 预期后端返回的数据类型
dataType: "json",
error : function() {
alert('smx失败 ');
},
success : function(data) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。