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

最新推荐文章于 2022-09-27 22:20:45 发布

Irelia__

最新推荐文章于 2022-09-27 22:20:45 发布

阅读量1.3k

点赞数

分类专栏： Java 文章标签： springboot ajax

本文链接：https://blog.csdn.net/Irelia_/article/details/82012357

版权

Java 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先贴出一个表单数据转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" %>
<!DOCTYPE html>
<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，$ (“#form1”)为form表单id

d.因为前台传过来的是一个对象，后台建一个实体类，属性名对应表单name，来接收
这里写图片描述

至此，测试，访问http://localhost:8081/pages/front/registQQ.jsp，在页面输入数据后点击注册
这里写图片描述
查看后台console

输出正确，测试成功！

Irelia__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于springboot的ajax表单无刷新注册功能

首先贴出一个表单数据转json神器 jsonHandler.js工具包$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a,function() { if(o[this.name]) { if (!o[t...
复制链接

扫一扫

专栏目录