应用系统定制开发使用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;	}}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

注册

注册与登录类似。

<!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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

信息查询显示

通过查询用户名，将得到的用户信息以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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

总结

相比于表单提交数据，Ajax对于用户的使用体验有良好的把控。比如，在登录场景中，使用Ajax可以实时的对用户的登录信息进行验证，当用户密码错误，只需更正密码即可；而使用表单提交数据，因为页面的跳转和数据的验证都是在后端进行。当用户信息错误，页面相当于进行了刷新，原本已经填写好的其他正确信息都已清空，只得重新填写，浪费时间，没有良好的用户体验。