基于springboot的ajax表单无刷新注册功能

首先贴出一个表单数据转json神器
jsonHandler.js工具包

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a,function() {
        if(o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [ o[this.name] ];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}

紧接上一节,编写registQQ.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>

<html>
<head>
<meta charset="UTF-8">
<title>QQ注册title>
<script type="text/javascript" src="/static/js/jquery-3.2.1.js">script>
<script type="text/javascript" src="/static/js/jsonHandler.js">script>
head>
<body>
<center>
    <form action="javascript:void(0)" id="form1">
    <table border="1px" width="300px">
        <tr>
            <td>昵称:td>
            <td><input type="text" name="nick" placeholder="请输入4-10位字符" />td>
        tr>
        <tr>
            <td>密码:td>
            <td><input type="password" name="pwd" placeholder="请输入6-16位字符" />td>
        tr>
        <tr>
            <td>手机号:td>
            <td><input type="text" name="phone" placeholder="请输入正确手机号格式" />td>
        tr>
        <tr>
            <td>邮箱:td>
            <td><input type="email" name="emali" placeholder="请输入正确的邮箱格式" />td>
        tr>
        <tr>
            <td>年龄:td>
            <td><input type="text" name="age" placeholder="请输入一个正整数" />td>
        tr>
        <tr>
            <td><input type="submit" value="注册" id="reg"/>td>
            <td><input type="reset" value="重置" />td>
        tr>
    table>
    form> 
    center>

    <script type="text/javascript">
        /* 在注册按钮上添加一个单击事件 */
        $(function(){
            $("#reg").click(function(){
                //  json对象
                var json = $("#form1").serializeObject();
                var str = JSON.stringify(json);
                //  alert(JSON.stringify(json));//将json对象转成json字符串
                $.ajax({
                    url:"/registQQ.do",
                    type:"post",
                    dataType:"json",
                    data:json,
                    success:function() {
                        alert("成功");
                    }
                });
            });
        });
    script>   
body>
html>

注意点:

a.JSP页面导入jquery包和表单数据转json包(用的原因:因此次功能采用ajax,而要一次性把表单里的数据传到后台,data:必须要传一个对象或一个字符串,而不是单一参数。jsonHandler工具就是可以把表单的数据转换为一个json对象,直接传到后台)
这里写图片描述
b.采用ajax,表单必须是禁用状态,这里采用js禁用表单
这里写图片描述
c.ajax核心代码,(“#reg”)为注册按钮id, (“#reg”)为注册按钮id, (“#form1”)为form表单id
基于springboot的ajax表单无刷新注册功能_第1张图片
d.因为前台传过来的是一个对象,后台建一个实体类,属性名对应表单name,来接收
基于springboot的ajax表单无刷新注册功能_第2张图片

至此,测试,访问http://localhost:8081/pages/front/registQQ.jsp,在页面输入数据后点击注册
基于springboot的ajax表单无刷新注册功能_第3张图片
查看后台console
基于springboot的ajax表单无刷新注册功能_第4张图片
输出正确,测试成功!

你可能感兴趣的:(Java)