简介
完成用户的登录和注册,以及个人信息的查询,并使用Ajax向后端提交JSON格式的数据。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。而JSON是一种轻量级的数据交换格式, 易于人阅读和编写,同时也易于机器解析和生成。
实现
控制器
@Autowired
注解负责完成服务层成员变量的自动装配。
@RequestBody
注解负责将前端发送过来的JSON数据封装到用户对象之中,以方便后端获取数据。
@ResponseBody
注解负责给前端返回JSON数据对象。
package com.qj.web;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.qj.model.User;
import com.qj.model.UserInfo;
import com.qj.service.UserInfoService;
import com.qj.service.UserService;
@Controller
@RequestMapping("/user1")
public class UserController1 {
@Autowired
private UserService userService;
@Autowired
private UserInfoService userInfoService;
@ResponseBody
@RequestMapping("/login")
public User login(@RequestBody User user) {
String name = user.getUserName();
String password = user.getUserPassword();
User user1 = userService.selectByName(name);
// 判断用户是否存在
if (user1 != null) {
// 判断密码是否相等
if (password.equals(user1.getUserPassword())) {
return user1;
}
}
return null;
}
@ResponseBody
@RequestMapping("/register")
public User register(@RequestBody User user) {
User user1 = userService.selectByName(user.getUserName());
// 判断用户是否已经注册
if (user1 == null) {
int i = userService.insert(user);
// 判断用户是否注册成功
if (i > 0) {
UserInfo userInfo = user.getUserInfo();
int id = user.getUserId();
userInfo.setUserId(id);
// 添加用户信息
int i1 = userInfoService.insert(userInfo);
if (i1 > 0) {
return user;
}
}
} else {
// 如果用户已经注册,直接返回数据
return user1;
}
return null;
}
@ResponseBody
@RequestMapping("/show")
public User show(String userName) {
// 查询用户
User user = userService.selectByName(userName);
System.out.println(user);
if (user != null) {
return user;
}
return null;
}
}
登录
得到输入框内的登录信息,并将其转换为JSON字符串
,并使用Ajax提交用户登录信息,最终得到后端响应给前端的验证结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script>
function login() {
// 获取用户名和密码
var name = $("#name").val();
var password = $("#password").val();
$.ajax({
url : "user1/login",
type : "post",
// data表示发送的数据
data : JSON.stringify({
userName : name,
userPassword : password
}),
// 定义发送请求的数据格式为JSON字符串
contentType : "application/json;charset=UTF-8",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data) {
if (data != null) {
location.href = "show.html";
}
}
});
}
</script>
</head>
<body>
<form>
姓名:<input type="text" id="name" /> <br>
密码:<input type="password" id="password" /><br>
<input type="button" value="确定" onclick="login()" />
<input type="reset" value="取消" />
</form>
</body>
</html>
注册
注册与登录类似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function register(){
var name = $("#name").val();
var password = $("#password").val();
var phone = $("#phone").val();
var address = $("#address").val();
$.ajax({
type : "post",
url : "user1/register",
data : JSON.stringify({userName : name, userPassword : password, userInfo : {userPhone : phone, userAddress: address }}),
contentType : "application/json;charset=utf-8",
dataType : "json",
success : function(data){
if (data != null){
alert("注册成功!");
location.href="login.html";
}
}
});
}
</script>
</head>
<body>
<form>
姓名:<input type="text" id="name" /> <br>
密码:<input type="password" id="password" /> <br>
电话:<input type="text" id="phone" /> <br>
地址:<input type="text" id="address" /> <br>
<input type="button" value="确定" onclick="register()"/>
<input type="reset" value="取消" />
</form>
</body>
</html>
信息查询显示
通过查询用户名,将得到的用户信息以JSON字符串的形式显示在页面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户页面</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script>
function show(){
var userName= $("#userName").val();
$.ajax({
type : "get",
url : "user1/show?userName="+userName,
dataType : "json",
success : function(data){
if (data != null){
//将用户信息显示在页面中
var newData = JSON.stringify(data,null,4);
var show = document.getElementById('show');
show.innerHTML=newData;
}
}
});
}
</script>
</head>
<body>
<form>
<input type="text" id="userName" />
<input value="查询" type="button" onclick="show()"/>
</form>
<pre><code id="show">显示用户信息</code></pre>
</body>
</html>
总结
相比于表单提交数据,Ajax对于用户的使用体验有良好的把控。比如,在登录场景中,使用Ajax可以实时的对用户的登录信息进行验证,当用户密码错误,只需更正密码即可;而使用表单提交数据,因为页面的跳转和数据的验证都是在后端进行。当用户信息错误,页面相当于进行了刷新,原本已经填写好的其他正确信息都已清空,只得重新填写,浪费时间,没有良好的用户体验。