ajax的路径跳转

ajax请求是局部刷新页面,所以在发送ajax请求后返回的内容会刷新页面中的局部,而不会进行页面跳转,

即使使用重定向,也会将重定向后返回的内容刷新在原页面的局部(在F12的Netword中可以查看请求的response返回的内容)

如:

1.在进行登陆时:

如果登录失败时需要在原页面局部显示错误信息,因此需要使用ajax请求

如果登陆成功则跳转到某个页面,此时使用ajax请求则无法实现跳转新页面的功能

2.在添加新内容时:

如果有异常信息则需要在原页面提醒,需使用ajax请求

如果添加成功则可能需要跳转到列表页面

解决方法:

使用  location.href=‘请求路径‘  家族

具体实现如:

前端:

$.ajax({
  url:/handle_login,
  data:$(#form-login).serialize(),
  type:post,
  dataType:json,
  success:function (json) {
    if(json.state==2000){
      // 注意:此处的index是Controller层的请求路径,
      // 由于在此例子中index页面是需要使用模板引擎解析的,所以需要使用Controller进行跳转
 
      window.location.href="/index";
    }else{
      formLogin.message=json.message;
    }
  }
});
 
后端:只需要返回一个json对象,其中的state表示状态码,上述例子中state为2000时表示成功
 
@RequestMapping("handle_login")
@ResponseBody
public JsonResult<Void> handleLogin(String phone, String password, String remember,
    HttpServletRequest request, HttpServletResponse response) {
  userService.loginUser(phone, password, remember, request, response);
  return JsonResult.ok();
}
此处的JsonResult是用于创建返回数据对象的类,ok是一个静态方法,表示操作成功,state为2000
 
提示:前述中使用了家族这个词汇,原因是可以用于跳转的不仅仅window.location.href(location.href),
还有top.location.href、parent.location.href等实现,甚至还有open方法打开新页面,
其区别参考:https://www.cnblogs.com/tongcc/p/11773763.html
 

ajax的路径跳转

上一篇:Buuctf-web-[GXYCTF2019]Ping Ping Ping


下一篇:前端基础之jQuery