注册页面
- 导入Bootstrap-3.3.7.min
- 导入JQuery-1.7.1.min
- 创建html
- ajax表单验证
- 返回成功页面
第一步:添加Bootstrap和JQuery
第二步:修改index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String appPath = request.getContextPath(); %>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>LibrarySystem</h2>
简单的查询、删除等基础功能
<br />
日期:2018-5-23 09:49:55
<br />
作者:Ray
<br />
网站:<a href="https://blog.csdn.net/q343509740" target="_blank">点击跳转csdn</a>
<br /><br /><br /><br />
注册页面:<a href="<%=appPath%>/register.html">点击前往</a>
</body>
</html>
第三步:创建register.html
<!doctype html>
<html lang="zh">
<script src="js/registerJS.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<script src="js/bootstrap-3.3.7.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理系统</title>
<!--<link rel="stylesheet" type="text/css" href="css/styles.css">-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h2>用户注册</h2>
<div class="form-group">
<input type="text" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<input type="text" id="password" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<input type="text" id="repassword" class="form-control" placeholder="请再次输入密码">
</div>
<div class="form-group">
<input type="text" id="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<button class="btn btn-primary btn-default" οnclick="register_submit()" type="submit">注册</button>
</div>
</div>
</div>
</div>
</body>
第四步:创建registerJS.js
function register_data(){
var username = document.getElementById("username");
var password = document.getElementById("password");
var repassword = document.getElementById("repassword");
var email = document.getElementById("email");
if(password.value != repassword.value){
alert("两次密码不一致!");
return;
}
if(username.value == ""){
alert("用户名不能为空!");
return;
}
var data = {};
data["username"] = username.value;
data["password"] = password.value;
data["email"] = email.value;
return data;
}
function register_submit() {
var data = register_data();
$.ajax({
url:"insertUser",
type:"POST",
data:data,
dataType:"JSON",
success:function (result) {
if(result == true){
alert("注册成功,3秒后跳转登录页面!");
setTimeout('window.location.href="index.html"');
}else{
alert("用户名已存在,请重新输入!");
}
},
errorL:function () {
alert("请求失败!");
}
});
}
第五步:修改UserController.java
package com.ray.controller;
import com.ray.entity.User;
import com.ray.service.UserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* @author Ray
* @date 2018/5/23 0023
*/
@Controller
public class UserController {
private Logger logger = LoggerFactory.getLogger(this.getClass());
@Resource
private UserService userService;
/**
* 用户注册
* @RequestMapping 请求路径
* @ResponseBody 返回JSON数据
*/
@RequestMapping("insertUser")
@ResponseBody
public boolean insertUser(HttpServletRequest request, HttpServletResponse response){
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
boolean result = userService.checkRegister(username,password,email);
if(result){
return true;
}
return false;
}
}
第六步:测试运行