后端传送数据到前端,以json格式传送

事件

在老早之前,我在后端传数据的时候,普遍用的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>

json

第二种,传送集合类型

这种具体叫什么类型,我不好形容,但是我可以确定的是这种数据格式最为常用

在原来的基础文件在加上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格式了,具体为什么会变成json格式数据,我目前还不知道,如果有知道的朋友可以下面留言回复

文章全部是本人原创,请勿转发,谢谢配合,版权所有-南香香-你会喜欢我吗

评论区
头像