Spring Boot项目-Ajax的使用

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。即异步的 JavaScript 和 XML

1.将前端资源页面pages文件夹下的静态资源：bootstrap3、css、images、js、web、 index.html相关的资源复制到项目src/main/resources/static文件夹下。如图所示。

注意区分thymleaf模板引擎，它的静态界面存放在templates文件夹下

2.以登录为例，业务层方法

    @Override
    public User login(String username, String password) {
        // 调用userMapper的findByUsername()方法，根据参数username查询用户数据
        User result = userMapper.findByUsername(username);
        // 判断查询结果是否为null
        if (result == null) {
            // 是：抛出UserNotFoundException异常
            throw new UserNotFoundException("用户数据不存在的错误");
        }
        // 判断查询结果中的isDelete是否为1
        if (result.getIsDelete() == 1) {
            // 是：抛出UserNotFoundException异常
            throw new UserNotFoundException("用户数据不存在的错误");
        }
        // 从查询结果中获取盐值
        String salt = result.getSalt();
        // 调用getMd5Password()方法，将参数password和salt结合起来进行加密
        String md5Password = getMd5Password(password, salt);
        // 判断查询结果中的密码，与以上加密得到的密码是否不一致
        if (!result.getPassword().equals(md5Password)) {
            // 是：抛出PasswordNotMatchException异常
            throw new PasswordNotMatchException("密码验证失败的错误");
        }
        // 创建新的User对象
        User user = new User();
        // 将查询结果中的uid、username、avatar封装到新的user对象中
        user.setUid(result.getUid());
        user.setUsername(result.getUsername());
        user.setAvatar(result.getAvatar());
        // 返回新的user对象
        return user;
    }

3.控制层方法

    @RequestMapping("login")
    public JsonResult login(String username, String password, HttpSession session) {
        // 调用业务对象的方法执行登录，并获取返回值
        User data = userService.login(username, password);
        //登录成功后，将uid和username存入到HttpSession中
        session.setAttribute("uid", data.getUid());
        session.setAttribute("username", data.getUsername());
        // 将以上返回值和状态码OK封装到响应结果中并返回
        return new JsonResult(OK, data);
    }

4.前端编写Ajax

$是一个jQuery函数,它可以通过ID选择器选择组件，ajax函数具体使用见下图

 jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

 图片来源于狂神说，对于data的传参方式

第一种，以json对象形式传参

data: {name:"John",location:"Boston"}。

第二种，以json数组形式传入

[
 {"name":"uname","value":"alice"},
 {"name":"mobileIpt","value":"110"},  
 {"name":"birthday","value":"2012-11-11"}
]

第三种，通过序列化从从表单中获取数据

表单

					
					

						名字：
						

							
						
					
					
					

						 密码：
						

							
						
					
					
					

						

							

								
									自动登录
								
							
						
					
					
					

						
						

							
							还没有账号？注册