Springboot项目中mock接口数据返回给前端

目录

一、问题描述

二、解决方法

三、总结

---

一、问题描述

我使用的是Ajax前端传数据给用Spring boot框架搭的后台，后台可以接受到数据，但是返回到前端时不能进入Ajax的success的函数里面，而是执行的error函数里的内容。

 前端Ajax代码

//点击事件，当前端的标签被点击时进行ajax与后端交互
function navbarClick(e){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/operator",
        data:{
            type:"哈哈哈哈哈哈",
        },
        //交互的返回数据类型为json
        dataType:"json",
        success:function(msg){
            alert(msg);
        },
        error:function () {
            alert("出错啦orz!!!");
        }
    });
}
//如果后端成功返回数据，那么前端成功接收之后应该执行alert()弹框显示返回的内容。
//如果前端未能成功接收，那么前端应该alert()弹窗显示"出错啦orz!!!"

后端的controller中的部分代码

@RequestMapping("/operator")
    @ResponseBody
    public String Operator(@RequestParam("type") String type){
        System.out.println("已经到了后台,接收的数据为:"+type);
        String str = "皮皮虾，我们走!!!";
        return str;
}
//后端成功接受数据，将会在后台打印"已经到了后台,接收的数据为:"哈哈哈哈哈"

当我前端执行点击事件后，后台能够成功接收前端数据，前端显示得到的结果弹窗显示是"出错啦orz!!!"

WTF???    我后台Controller部分加上了@ResponseBody注解，我看好多博客说Spring boot框架中加了@ResponseBody注解之后会将函数返回的内容转化为json格式，而且我前端Ajax中设置的dataType接受类型也是"json"。

二、解决方法

最后我的解决方法是，将前端Ajax代码中的dataType类型设置为"html"或者"text",前端就能够成功接收了囧rz。

 

 

三、总结

前端不能成功接收数据应该是因为我后端返回的数据类型（函数的返回值类型是String）和前端接收的数据类型(dataType设置的为json)不一致吧，但是网上很多博客说后端加上@ResponseBody注解是能自动将返回类型转化为json类型，那我前端设置的dataType为json应该也是没有问题的吧囧rz。

总之就是迷惑行为，如果你的后端返回值类型为String，前端Ajax部分将dataType改成了html或者text还是不行，可以尝试将IDE重启，或者将电脑重启，再试一下，反正我用的IDEA经常修改了html页面，重启服务之后页面显示的内容还是没有修改之前的，得重启程序才行，玄学救我！！！

PS：补充，后面发现清除浏览器缓存之后，就不存在重启后端服务后之前更改的html页面不生效的问题了，Chrome的清除缓存快捷键是ctrl+shift+delete。

因为我也是刚刚接触Spring boot这一块，自己也不是很清楚一些细节，所以将这个问题记录下来，希望对有同样问题的人有所帮助！