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<User> 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<User>(OK, data);
    }

4.前端编写Ajax

<script type="text/javascript">
			$("#btn-login").click(function() {
				$.ajax({
					url: "/users/login",
					type: "POST",
					data: $("#form-login").serialize(),
					dataType: "json",
					success: function(json) {
						if (json.state == 200) {
							alert("登录成功！");
							$.cookie("avatar", json.data.avatar, {expires: 7});
							console.log("cookie中的avatar=" + $.cookie("avatar"));
							location.href = "index.html";
						} else {
							alert("登录失败！" + json.message);
						}
					}
				});
			});
		</script>

$是一个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"}
]

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

表单

<form id="form-login" action="index.html" class="form-horizontal" role="form">
					<!--用户名-->
					<div class="form-group">
						<label for="username" class="col-md-3 control-label">名字：</label>
						<div class="col-md-8">
							<input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
						</div>
					</div>
					<!--密码-->
					<div class="form-group">
						<label for="password" class="col-md-3 control-label"> 密码：</label>
						<div class="col-md-8">
							<input name="password" type="text" class="form-control" id="password" placeholder="请输入密码">
						</div>
					</div>
					<!-- 记住我-->
					<div class="form-group">
						<div class="col-md-offset-3 col-md-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" id="auto">自动登录
								</label>
							</div>
						</div>
					</div>
					<!--提交按钮-->
					<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-8">
							<input id="btn-login" class="btn btn-primary" type="button" value="登录" />
							<span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
						</div>
					</div>
				</form>