注册页面

导入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" onclick="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;
    }
}

LibrarySystem图书管理系统(五)

注册页面

第一步：添加Bootstrap和JQuery

第二步：修改index.jsp

第三步：创建register.html

第四步：创建registerJS.js

第五步：修改UserController.java

第六步：测试运行

猜你喜欢