文章	评论	标签
155	503	67

事件

在老早之前，我在后端传数据的时候，普遍用的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格式数据，我目前还不知道，如果有知道的朋友可以下面留言回复

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

南香香

事件

传送数据第一种最简单的

第二种，传送集合类型