springboot与ajax

springboot不建议用jsp，又要动态显示数据，就只能把主意打到ajax上面的；

在springboot集成html里面中，html面直接跳后台接口就可以实现页面跳转；

1. 当跳转到主页弄几个超链接调后台接口用，我们要从现在页面home跳转到reportlist页面去：

2.然后点击一个超链接调后台接口/web/reportlist

3.写后台调用后就跳转接口reportlist页面的接口；

@Controller
@RequestMapping("/web/")
public class login {

private static final Logger logger = LoggerFactory.getLogger(AttentionService.class);
@Autowired
private AdminUserService adminUserService;

@RequestMapping("login")
public String helloHtml(HashMap<String,Object> map){

return "/hello";
}
@RequestMapping("dologin")
public String dologin(@ModelAttribute("AdminUser")AdminUser adminUser,Model model,HttpSession session){
AdminUser a = adminUserService.findAdminUser(adminUser);
if(null != a && !"".equals(a)){
session.setAttribute(Constants.USER_SESSION, a);
return "/home";
}else{
model.addAttribute("loginFail", "用户名或密码出错！");
return "/hello";
}
}
@RequestMapping("reportlist")
public String reportlist(HashMap<String,Object> map){

return "/reportlist";

}

4.在建一个reportlist的html页面来，我们跳转到这个页面来

5.写一个后台拿数据返给前台的接口/web/getReport

@Controller
@RequestMapping("/web/")
public class ReportController {
private static final Logger logger = LoggerFactory.getLogger(AttentionService.class);
@Autowired
private ReportService reportService;
@RequestMapping("getReport")
@ResponseBody
public ReturnResult getReport(HttpSession session,Model model,String keyword){
ReturnResult result = new ReturnResult();
try {
AdminUser adminUser = (AdminUser) session.getAttribute(Constants.USER_SESSION);
List<ReportVo> list = new ArrayList<ReportVo>();
if(null != adminUser){
if(null == keyword || "".equals(keyword)){
list= reportService.queryAll();
result.setData(list);
result.setCode(Constant.SUCCESS_CODE);
result.setMessage("查询成功！");
}else{
list= reportService.queryByKeyword(keyword);
}
}else{
result.setCode(Constant.ERROR_CODE);
result.setMessage("身份失效，请重新登录");
}
} catch (Exception e) {
// TODO: handle exception
logger.debug("error = " + e.getClass().getSimpleName()+" "+e.getMessage());
result.setCode(Constant.ERROR_CODE);
result.setMessage("信息获取失败！请稍后重试.....");
}
return result;
}

6.在script里面写一个ajax进来就调后台接口/web/getReport加载数据到此页面的ajax方法；

$(document).ready(function(){

getFoods("");

});

用浏览器断点调试页面看看data里面是否拿到后台返回的数据以及数据的样式；将data转换成json对象var json = eval('('+data + ')');不知道是不是H5里面不能用for循环，反正一用for循环就报错；通过for..in循环展示数据；

</script>

我们来理一下思路，程序运行的步骤

1.在浏览器中输入http://localhost:8080/web/login，就调用后台/web/login接口，进入到在templates文件夹下面简历的hello页面。

2.在输入密匙form表单提交调用后台接口/web/dologin进行登录，成功就跳转到主页/home页面；失败就返回/hello登录页面。

3.现在登录成功在/home页面，点击超链接<a href="/web/reportlist" >举报信息查询</a>调用接口，实现跳转到reportlist页面去展示数据。

4.我们现在reportlist页面，通过进入页面就调用ajax来调用后台接口，获取数据并且展示到我们现在所在的reportlist页面上。

猜你喜欢