前后端交互不用ajax,不用jsp怎么实现前后端交互？给萌新后端的ajax教程(3)

Hello大家好，今天为大家带来ajax系列的(大概可能也许是)最后一篇，这一篇我们主要讲讲前端html页面接收json后可以做的处理。

一、遍历json

(1)List型

Controller代码：

@RequestMapping(value = "/test")

public @ResponseBody List testAJAX(HttpServletRequest request, HttpServletResponse response) {

List 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> testAJAX(HttpServletRequest request, HttpServletResponse response) {

Map a=new HashMap<>();

a.put("topic","我是标题a");

a.put("context","我是内容a");

Map b=new HashMap<>();

b.put("topic","我是标题b");

b.put("context","我是内容b");

List> 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就是这种形式。

二、使用json传递数据，后端给前端发送Date，前端收到的不是标准格式的时间而是一串数字的问题。

在domain层Date类型数据的get方法上方加上

@JsonFormat(pattern ="yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")

注解即可。

三、结语

基于jQuery的ajax教程暂时告一段落，如果有什么遗漏的地方过后会再开一篇文章进行补充。感谢阅读，希望能对你有所帮助。