Hello大家好，今天为大家带来ajax系列的(大概可能也许是)最后一篇，这一篇我们主要讲讲前端html页面接收json后可以做的处理。
一、遍历json
(1)List型
Controller代码：
@RequestMapping(value = "/test")
public @ResponseBody List<String> testAJAX(HttpServletRequest request, HttpServletResponse response) {
List <String> QAQ=new ArrayList<>();
QAQ.add("你好啊！");
QAQ.add("两只老虎跑得快！");
QAQ.add("Hello World.");
return QAQ;
}
前端代码：
function testajax() {
var text=document.getElementById("txt").value;
.ajax({
url:"test",
//contentType:"application/json;charset=UTF-8",
type:"post",
data:{},
dataType:"json",
async:true,
success:function(data){
alert(data.topic);
alert(data.context);
},
});
也就是说，使用data.key的名字就可以访问value啦。
你自己封装好的对象也符合这条规则喔。
(3)Map型List
什么是Map型List呢？就是多个Map的集合。
Controller函数：
@RequestMapping(value = "/test")
public @ResponseBody List<Map<String,String>> testAJAX(HttpServletRequest request, HttpServletResponse response) {
Map<String,String> a=new HashMap<>();
a.put("topic","我是标题a");
a.put("context","我是内容a");
Map<String,String> b=new HashMap<>();
b.put("topic","我是标题b");
b.put("context","我是内容b");
List<Map<String,String>> c=new ArrayList<>();
c.add(a);
c.add(b);
return c;
}
前端：
$.ajax({
url:"test",
//contentType:"application/json;charset=UTF-8",
type:"post",
data:{},
dataType:"json",
async:true,
success:function(data){
alert(data[0].topic);
alert(data[0].context);
alert(data[1].topic);
alert(data[1].context);
},
});
当然同样可以使用for循环的写法。
可是为什么要闲的蛋疼这样写呢？我来举一个例子，比如我们写一个博客项目，我们定义一个对象Article，它里面有发表时间time属性，还有标题topic属性。当我们需要加载文章列表时，如果列表想显示文章的标题和发表时间，就需要这么做，List<Article>就是这种形式。
二、使用json传递数据，后端给前端发送Date，前端收到的不是标准格式的时间而是一串数字的问题。
在domain层Date类型数据的get方法上方加上
@JsonFormat(pattern ="yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
注解即可。
三、结语
基于jQuery的ajax教程暂时告一段落，如果有什么遗漏的地方过后会再开一篇文章进行补充。感谢阅读，希望能对你有所帮助。