Ajax前后端交互 (2020-09-15)

Ajax前后端交互（使用Ajax需先导入jQuery.js）

一、为springboot项目导入jQuery

下载jQuery.js文件

 

 

 

springBoot 项目中js文件位置如下

 

 

 

前端导入jQuery.js文件

 

 

配置文件

 

二、使用Ajax进行数据传输

后端接口编写

@ResponseBody//返回类型是json，必须加上该注解
@RequestMapping(value="/getList",  method= RequestMethod.GET)//GET:是从服务器上获取数据，post 是向服务器传送数据
public Map<String,Object> getList(HttpServletRequest request){
    String id = request.getParameter("id");//接收前端的数据
    String logo = request.getParameter("logo");//接收前端的数据
    System.out.println(id);
    System.out.println(logo);
    Map<String,Object> map = new HashMap<>();
    map.put("name", "张三");
    map.put("age", "21");
    return map;//返回数据让前端接收
}

前端Ajax接收和发送数据部分代码

$.ajax({
    type:"GET",  
    url:"/DingDing/DingDingAPI/getList",    //接口地址
    dataType:"json",  //接收文件格式
    cache:false,//禁用缓存
    data:{        //传给服务器的数据
        id:"1",
        logo:"啦啦啦"
    },
    success:function (data) {   //从服务器接收的数据
        console.info(data.name);
    }
});