前端接收后端返回数据中【后端返回数据

前端jQuery发送ajax请求后，后端controller接收数据并进行处理，然后将结果返回给前端的 success : functiondata){} 中。

对于不同格式的返回数据，前端 $.ajax) 中要设置对应的 dataType 值，才能保证顺利接收到这些数据。

现将 后端返回数据的格式 – dataType 的对应关系整理如下。

参考：https://blog.csdn.net/dreamstar613/article/details/61913970

汇总表格

后端返回数据类型	$.ajax{}) 中 dataType属性值
html页面	html / 无
Map	json / 无
Integer	json / 无
String	text / 无
实体类Class	json / 无
实体类数组ArrayList	json / 无

参考文档

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

一、后端返回 html页面

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>


<div id="content-wrapper"></div>


<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {
            /**1)用$"#content-wrapper").htmldata);显示页面*/
            $.ajax{
                cache : false,
                type : 'POST',
                url : '/page/test',
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    $"#content-wrapper").htmldata);
                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /*
     * 1)不能有注解@ResponseBody
     */
    @RequestMappingvalue = "/page/test", method = RequestMethod.POST)
    public String editAreaWithFile) {

        return "test";

    }

}

页面test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
    <div>this is the test.html.</div>

    <button type="button" class="btn">按钮</button>

    <script>
        $document).readyfunction ) {
            $".btn").clickfunction ) {
                alert"点击按钮");
            });
        });
    </script>
</body>
</html>

效果：

二、后端返回 Map

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>



<!-- Map -->
<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {

            $.ajax{
                cache : false,
                type : 'POST',
                url : '/testReturnData2',
                // 预期后端返回的数据类型
                dataType : "json",
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    forvar x in data){
                        console.log"x == " + x);
                        console.log"data[x] == " + data[x]);
                    }
                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /**
     * 返回Map
     * @return Map
     * @前端dataType : "json",
     */
    @ResponseBody
    @RequestMappingvalue = "/testReturnData2", method = RequestMethod.POST)
    public Map<String, String> testMap) {
        //处理参数
        HashMap<String, String> map = new HashMap<>);
        map.put"name","Tom");
        map.put"job","cat");
        map.put"age","14");

        return map;
    }
}

效果：

三、后端返回 Integer

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>


<!-- Integer -->
<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {

            $.ajax{
                cache : false,
                type : 'POST',
                url : '/testReturnData3',
                // 预期后端返回的数据类型
                dataType : "json",
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    alertdata);
                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /**
     * 返回 Integer
     * @return Integer
     * @前端dataType : "json",
     */
    @ResponseBody
    @RequestMappingvalue = "/testReturnData3", method = RequestMethod.POST)
    public Integer testInteger) {
        //处理参数
        return 99;
    }
    
}

效果：

四、后端返回 String

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>


<!-- String -->
<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {

            $.ajax{
                cache : false,
                type : 'POST',
                url : '/testReturnData4',
                // 预期后端返回的数据类型
                dataType : "text",
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    alertdata);
                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /**
     * 返回 String
     * @return String
     * @前端dataType : "text",
     */
    @ResponseBody
    @RequestMappingvalue = "/testReturnData4", method = RequestMethod.POST)
    public String testString) {
        //处理参数
        return "hello";
    }

}

效果：

五、后端返回实体类Class

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>


<!-- 实体类  -->
<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {

            $.ajax{
                cache : false,
                type : 'POST',
                url : '/testReturnData5',
                // 预期后端返回的数据类型
                dataType: "json",
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    // 返回的是object
                    alertjQuery.typedata));
                    console.log"flag: " + data.flag);
                    console.log"name: " + data.name);
                    console.log"age: " + data.age);
                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /**
     * 返回 实体类
     * @return 实体类对象
     * @前端dataType : 无/json
     */
    @ResponseBody
    @RequestMappingvalue = "/testReturnData5", method = RequestMethod.POST)
    public Student testJavaBean) {
        //处理参数
        Student student = new Student);
        student.setFlag1);
        student.setName"Tom");
        student.setAge12);

        return student;
    }

}

实体类 Student.class:

package com.cei.ceipage.entity;


import lombok.Data;

@Data
public class Student {

    private int flag;
    private String name;
    private int age;

    public Student) {
    }

    public Studentint flag, String name, int age) {
        this.flag = flag;
        this.name = name;
        this.age = age;
    }
}

效果：

六、后端返回实体类数组ArrayList

前端：

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
</div>


<!-- 实体类集合 -->
<script>
    $document).readyfunction ) {
        $".layui-btn-normal").clickfunction ) {

            $.ajax{
                cache : false,
                type : 'POST',
                url : '/testReturnData6',
                // 预期后端返回的数据类型无/json 都可)
                dataType: "json",
                error : function) {
                    alert'smx失败 ');
                },
                success : functiondata) {
                    // 返回的是object
                    console.log"返回的data的类型：" + jQuery.typedata) + "

");

                    forvar x in data){
                        // String
                        console.log"x的类型：" + jQuery.typex));
                        // Object
                        console.log"data[x]的类型：" + jQuery.typedata[x]));

                        // 正确输出
                        console.log"x == " + x); //按循环依次打印 0,1,2
                        console.log"data[x] == " + data[x]);
                        console.log"data[x].flag: " + data[x].flag);
                        console.log"data[x].name: " + data[x].name);
                        console.log"data[x].age: " + data[x].age + "

");

                        // 属性为 undefined
                        // console.logx);
                        // console.logx.flag);
                        // console.logx.name);
                        // console.logx.age);

                        // 属性为 undefined
                        // var xJson = JSON.parsex);
                        // console.logxJson.flag);
                        // console.logxJson.name);
                        // console.logxJson.age);

                        // 报错
                        // var xJson = JSON.parsedata[x]);
                        // console.logxJson.flag);
                        // console.logxJson.name);
                        // console.logxJson.age);

                    }

                }
            });
        });
    });
</script>

后端：

@Controller
public class testController {

    /**
     * 返回 实体类数组ArrayList
     * @return ArrayList对象
     * @前端dataType : 无/json
     */
    @ResponseBody
    @RequestMappingvalue = "/testReturnData6", method = RequestMethod.POST)
    public ArrayList<Student> testJavaBeanList) {
        //处理参数
        ArrayList<Student> students = new ArrayList<>);
        Student student1 = new Student1, "Tom", 12);
        Student student2 = new Student0, "Jerry", 10);
        Student student3 = new Student1, "Jim", 14);
        students.addstudent1);
        students.addstudent2);
        students.addstudent3);

        return students;
    }

}

效果：

前端接收后端返回数据中【后端返回数据

汇总表格

参考文档

一、后端返回 html页面

二、后端返回 Map

三、后端返回 Integer

四、后端返回 String

五、后端返回实体类Class

六、后端返回实体类数组ArrayList

Published by

风君子

近期文章

标签

汇总表格

参考文档

一、后端返回 html页面

二、后端返回 Map

三、后端返回 Integer

四、后端返回 String

五、后端返回 实体类Class

六、后端返回 实体类数组ArrayList

Published by

风君子

近期文章

标签

五、后端返回实体类Class

六、后端返回实体类数组ArrayList