ajax实现登录页面跳转,Ajax登录功能实现

一：Ajax是什么？

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。

例如： HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

作用：使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载(刷新)整个页面，这使得程序能够更快地回应用户的操作。

二：Ajax实现登录页面

login.html

Login

用户名

密码

忘记密码？

登 录

function login() {

let username = $("#username").val(); //获取值;

let password = $("#password").val();

if (username === "" || password === ""){

console.log('用户名和密码不能为空哦');

return;

}else{

$.ajax({

type: "POST", //请求方式;

url: "/login", //请求的地址为、login;

dataType: "json", //数据类型;

data: {username:username, password:password}, //传递的数据;

success: function(result) { //用回调函数接收传回来的值;

if (result.code === 200) {

window.location.href = '/index'; //跳转页面路径;

} else {

console.log("failed!!!")

}

},

});

}

}

二：Controller实现

LoginController.java

@Controller

public class LoginController {

@Autowired

private LoginMapper loginMapper;

@Autowired

private Result result;

@GetMapping("/login")

public String login(){

return "login";

}

private static final Logger log = LoggerFactory.getLogger(LoginController.class);

@PostMapping("/login") //POST请求

@ResponseBody //返回JSON

public String login(String username, String password, HttpServletRequest request){

// 获取管理员对象

User user = loginMapper.selectById(1);

// 进行判断

if (user.getName().equals(username) && user.getPassword().equals(password)){

result.setCode(200);

result.setMessage("success！！");

log.warn("登录成功！！");

request.getSession().setAttribute("user",user);

}else {

result.setCode(404);

result.setMessage("failed！！");

log.warn("【错误】密码登录，用户名或密码错误");

}

//使用了fastjson

return JSONObject.toJSONString(result);

}

}

导入的包：

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-test

test

mysql

mysql-connector-java

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.3

com.alibaba

fastjson

1.2.62

结语：

最近用到了做个笔记...