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);
}
});