(1)先把spring 基础项目创建出来。参考文章(点击以下链接):
(2)前后端分离,为解决跨域问题,写一个过滤器设置header。注意,springboot 增加过滤器需要在启动类增加注解
@ServletComponentScan
@WebFilter(filterName = "accessFilter",urlPatterns = "/*")
public class AccessFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//用过滤器这样设置header可以解决跨域问题
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin", "*");
filterChain.doFilter(servletRequest,servletResponse);
}
}
(3)现在开始写后端。
@Controller
public class HellowordController {
@GetMapping(path = "/testJson")
@ResponseBody
public User testJson(){
//User是一个普通的Bean,有属性id和name,不贴出来了
//注意加上@ResponseBody 才可以返回json到前端
User userInfo = new User() ;
userInfo.setId(Long.getLong("123"));
userInfo.setName("zhihao");
return userInfo;
}
}
(4)在前端用js发送ajax请求到后端。需要添加jQuery。
$(function(){
var url = 'http://localhost:8080/testJson';
$.ajax({
url:url,
type:"get",
//dataType:"json",
data:{
userID:"1"
},
success:function(response){
console.log('success back........')
console.log(response)
console.log("属性")
console.log(response.name)
},
error:function(response) {
console.log('error back........')
console.log(response)
}
});
});
(5)在浏览器用F12打开调试面板,点击console界面。查看测试结果,成功!