事件
在老早之前,我在后端传数据的时候,普遍用的el表达式,因为最早响应页面的也是jsp文件,所以我最老早之前用的el表达式。
在前不久开始学springboot的时候,也无意中接触到一种模板引擎thymeleaf,这个模板引擎好点就是不再用的jsp,直接可以去用人家拿数据的办法,我下面就不过多介绍了。
今天主要介绍到如何去使用json数据。今天需要用到的jar包,以及相关代码我也会贴附在下面。
maven
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.3</version>
</dependency>
JQuery在线库
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
传送数据第一种最简单的
Controller
@RequestMapping("/shuju")
@ResponseBody
public Map<String, String> shuju(){
System.out.println("进入方法");
Map<String, String> map = new HashMap<String, String>();
map.put("username","11");
map.put("password","2222");
return map;
}
前端拿数据
<script type="text/javascript">
$.ajax({
//请求路径servlet
url: "shuju",
type: "get",
dataType: "json",
async: true,//是否异步
//请求成功
success: function (msg){
console.log(msg.username+" "+msg.password);
},
//请求失败
error: function (e) {
alert("request failed !")
}
})
</script>
第二种,传送集合类型
这种具体叫什么类型,我不好形容,但是我可以确定的是这种数据格式最为常用
在原来的基础文件在加上bean实体类
student
public class Student {
int age;
String name;
//里面只包涵这俩字段,如果测试,自己把set方法get方法以及构造方法生成出来
}
Controller
@RequestMapping("/shuju")
@ResponseBody
public List<Student> shuju(){
System.out.println("进入方法");
List<Student> ls=new ArrayList<Student>();
Student s1=new Student(1,"小南");
Student s2=new Student(2,"香香");
Student s3=new Student(3,"南");
ls.add(s1);
ls.add(s2);
ls.add(s3);
return ls;
}
前端拿数据
<script type="text/javascript">
$.ajax({
//请求路径servlet
url: "shuju",
type: "get",
dataType: "json",
async: true,//是否异步
//请求成功
success: function (msg){
for(var i=0;i<msg.length;i++){
console.log(msg[i].age+" "+msg[i].name);
}
},
//请求失败
error: function (e) {
alert("request failed !")
}
})
</script>
两种拿不同的数据,其实方法都很类似,唯独不一样的,就是一个直接拿,一个要通过遍历之后,在从循环里面提取出来
共同点:后端传出来的数据,默认直接为json格式了,具体为什么会变成json格式数据,我目前还不知道,如果有知道的朋友可以下面留言回复
文章全部是本人原创,请勿转发,谢谢配合,版权所有-南香香-你会喜欢我吗