使用Ajax完成注册和登录

简介完成用户的登录和注册，以及个人信息的查询，并使用Ajax向后端提交JSON格式的数据。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。而JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。实现控制器@Autowired注解负责完成服务层成员变量的自动装配。@RequestBody注解负责将前端发送过来的JSON数据封装到用户对象之中，以方便

wow~ ⊙o⊙

8580人浏览 · 2022-05-21 22:51:08

wow~ ⊙o⊙ · 2022-05-21 22:51:08 发布

简介

完成用户的登录和注册，以及个人信息的查询，并使用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;
	}
}

<!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()" />&nbsp;&nbsp;&nbsp; 
		<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()"/>&nbsp;&nbsp;&nbsp; 
		<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可以实时的对用户的登录信息进行验证，当用户密码错误，只需更正密码即可；而使用表单提交数据，因为页面的跳转和数据的验证都是在后端进行。当用户信息错误，页面相当于进行了刷新，原本已经填写好的其他正确信息都已清空，只得重新填写，浪费时间，没有良好的用户体验。