前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决!

近期在开发网站前端的时候,始终出现2次请求。困扰了很久。查询了网上的解决办法。发现,根源是因为,我的form表单里增加了一个action。虽然里面是空的,但是依然会在点击submit格式的按钮时,触发一次请求。这就引起了一种怪异的现象。

虽然ajax执行了成功!数据库执行了追加数据操作。但是页面始终停留在当前地址。

非常怪异,实际上,大家去掉form表单内的action,改一下submit,改成button模式,就可以恢复正常了。


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册-积德寺-菩提佛堂app-网页版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="许愿祈福,祈福网站"/>
    <meta name="description" content="欢迎注册菩提佛堂app账号信息,可以参加线上共修活动!"/>
    <link th:href="@{/static/css/mycommon.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/css/login.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/static/js/jquery.js}"></script>
    <style>
        .qifu_main {
            margin:10px auto;
            padding:14px;
            border: 1px solid #99CC00;
            border-radius: 8px;
            background: rgba(235, 179, 22, 0.8);
            text-align: center;
            font-size: 1.0em;
            width: 80%;
            height:auto;
        }

        .qifu_main .form_register {
            width: auto;
            height: auto;

        }
        .qifu_main p img{
            width: 80%;
        }
        .qifu_main .form_register .item {
            margin: 8px auto;
            padding-bottom: 12px;
            text-align: left;
            width: auto;
            height: auto;
        }

        .qifu_main .form_register  button {
            display: block;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ffb100;
            font-size: 1.0em;
            color: #FFFFFF;
            margin: 5px auto;
        }
        .qifu_main .form_register .item select{
            width: 30%;
            height: 26px;
        }
        .qifu_main .form_register .item input{
            width: 100%;
            height: 26px;
        }
        .qifu_main .form_register .item .icon-input{
            display: inline-block;
            height: 30px;
            line-height: 30px;
        }
        .qifu_main .form_register .item label img{
            width: 30px;
            height: auto;
        }
    </style>
</head>
<body>
<div th:replace="header :: top"></div>
<!--开始注册-->
<div class="qifu_main">
    <p>欢迎注册会员</p>
    <form  id="form_register" class="form_register">

        <div class="item">
            <label for="uname"><img th:src="@{/static/images/icon-lianhua.png}">名字:</label>
            <input type="text" required id="uname" name="username" minlength="2" maxlength="10"  placeholder="您的名字不超过10个字">
            <span class="msg-default hidden" id="namespan">用户名长度最小为2,最大为10</span>
        </div>

        <div class="item">
            <label for="upassword"><img th:src="@{/static/images/icon-lianhua.png}">密码:</label>
            <input type="password" required id="upassword" minlength="6" maxlength="10" name="password"   placeholder="请设置您的密码">
            <span class="msg-default hidden">密码长度在6到10位之间</span>
        </div>
        <div class="item">
            <label for="upwdconfirm"><img th:src="@{/static/images/icon-lianhua.png}">验证密码:</label>
            <input type="password" required id="upwdconfirm" name="upwdconfirm" minlength="6" maxlength="10"  placeholder="请再次输入密码">
            <span class="msg-default hidden">密码长度在6到10位之间</span>
        </div>
        <div class="item">
            <label for="phone"><img th:src="@{/static/images/icon-lianhua.png}">手机:</label>
            <input type="phone" required id="phone" name="phone" maxlength="11" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" placeholder="请输入手机号码">
            <span class="msg-default hidden" id="phonespan">手机长度最大50位</span>
        </div>
        <div class="item">
            <label for="email"><img th:src="@{/static/images/icon-lianhua.png}">邮箱:</label>
            <input type="email" required id="email" name="email" maxlength="100"  placeholder="请输入邮箱">
            <span class="msg-default hidden" id="emailspan">邮箱长度最大100位</span>
        </div>
        <div class="item">
            <button type="button" id="btnRegister" >提交</button>&nbsp;&nbsp;
            <button type="reset" >重置</button>
        </div>

    </form>
</div>
<!--结束注册-->
<div th:replace="footer :: footer"></div>
<script>

    /*1.对用户名进行验证*/
    //当对象失去焦点触发验证流程
    uname.onblur = function(){
        if(this.validity.valueMissing){
            this.nextElementSibling.innerHTML = '用户名不能为空';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('用户名不能为空');
        }else if(this.validity.tooShort){
            this.nextElementSibling.innerHTML = '用户名不能少于2位';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('用户名不能少于2位');
        }else {
            this.nextElementSibling.innerHTML = '用户名格式正确';
            this.nextElementSibling.className = 'msg-success';
            this.setCustomValidity('');
            var data =$("#uname").val();
            if(!data){   //用户没有输入任何内容
                return;
            }
            /**发起异步GET请求,询问服务器用户名是否已经存在**/
            $.ajax({
                url:"../user/checkName",
                data:"username="+$("#uname").val(),
                type:"get",
                dataType:"json",
                success:function(obj){
                    $("#namespan").html(obj.message);//显示服务器的响应信息
                    if(obj.state==0){
                        $("#namespan").attr("class","msg-error");
                    }else{
                        $("#namespan").attr("class","msg-success");
                    }
                }
            });

        }
    }

    uname.onfocus = function(){
        this.nextElementSibling.innerHTML = '用户名长度在2到10位之间';
        this.nextElementSibling.className = 'msg-default';
    }
    upassword.onfocus = function(){
        this.nextElementSibling.innerHTML = '密码长度在6到10位之间';
        this.nextElementSibling.className = 'msg-default';
    }
    upassword.onblur = function(){
        if(this.validity.valueMissing){
            this.nextElementSibling.innerHTML = '密码不能为空';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('密码不能为空');
        }else if(this.validity.tooShort){
            this.nextElementSibling.innerHTML = '密码长度在尽量别少于6位';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('密码长度在尽量别少于6位');
        }else {
            this.nextElementSibling.innerHTML = '密码格式正确';
            this.nextElementSibling.className = 'msg-success';
            this.setCustomValidity('');
        }
    }


    upwdconfirm.onfocus = function(){
        this.nextElementSibling.innerHTML = '密码长度在6到10位之间';
        this.nextElementSibling.className = 'msg-default';
    }
    //当确认密码输入框失去焦点时触发验证。
    upwdconfirm.onblur = function(){
        if(this.validity.valueMissing){
            this.nextElementSibling.innerHTML = '密码不能为空';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('密码不能为空');
        }else if(this.validity.tooShort){
            this.nextElementSibling.innerHTML = '密码长度在尽量别少于6位';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('密码长度在尽量别少于6位');
        }else {
            this.nextElementSibling.innerHTML = '密码格式正确';
            this.nextElementSibling.className = 'msg-success';
            this.setCustomValidity('');
            var pwd1 =$("#upassword").val();
            var pwd2 =$("#upwdconfirm").val();
            if(pwd1!=pwd2){
                this.nextElementSibling.innerHTML = '两次输入密码不一致';
                this.nextElementSibling.className = 'msg-error';
                this.setCustomValidity('密码长度在尽量别少于6位');
            }else{
                this.nextElementSibling.innerHTML = '两次输入密码一致';
                this.nextElementSibling.className = 'msg-success';
                this.setCustomValidity('');
            }
        }
    }

    /*3.对邮箱地址进行验证*/
    email.onblur = function(){
        if(this.validity.valueMissing){
            this.nextElementSibling.innerHTML = '邮箱不能为空';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('邮箱不能为空');
        }else if(this.validity.typeMismatch){
            this.nextElementSibling.innerHTML = '邮箱格式不正确';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('邮箱格式不正确');
        }else {
            this.nextElementSibling.innerHTML = '邮箱格式正确';
            this.nextElementSibling.className = 'msg-success';
            this.setCustomValidity('');

            var data =document.getElementById("email").value;
            if(!data){   //用户没有输入任何内容
                return;
            }
            /**发起异步GET请求,询问服务器邮箱是否已经存在**/
            $.ajax({
                url:"../user/checkEmail",
                data:"email="+$("#email").val(),
                type:"get",
                dataType:"json",
                success:function(obj){
                    $("#emailspan").html(obj.message);
                    if(obj.state==0){
                        $("#emailspan").attr("class","msg-error");
                    }else{
                        $("#emailspan").attr("class","msg-success");
                    }
                }
            });
        }
    }
    email.onfocus = function(){
        this.nextElementSibling.innerHTML = '请输入合法的邮箱地址';
        this.nextElementSibling.className = 'msg-default';
    }
    /*3.对手机号进行验证*/
    phone.onblur = function(){
        if(this.validity.valueMissing){
            this.nextElementSibling.innerHTML = '手机号不能为空';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('手机号不能为空');
        }else if(this.validity.patternMismatch){
            this.nextElementSibling.innerHTML = '手机号格式不正确';
            this.nextElementSibling.className = 'msg-error';
            this.setCustomValidity('手机号格式不正确');
        }else {
            this.nextElementSibling.innerHTML = '手机号格式正确';
            this.nextElementSibling.className = 'msg-success';
            this.setCustomValidity('');

            var data =document.getElementById("phone").value;
            if(!data){   //用户没有输入任何内容
                return;
            }
            /**发起异步GET请求,询问服务器用户名是否已经存在**/
            $.ajax({
                url:"../user/checkPhone",
                data:"phone="+$("#phone").val(),
                type:"get",
                dataType:"json",
                success:function(obj){
                    $("#phonespan").html(obj.message);
                    if(obj.state==0){
                        $("#phonespan").attr("class","msg-error");
                    }else{
                        $("#phonespan").attr("class","msg-success");
                    }
                }
            });
        }
    }
    phone.onfocus = function(){
        this.nextElementSibling.innerHTML = '请输入合法的手机号';
        this.nextElementSibling.className = 'msg-default';
    }
</script>
<script>
    $('#btnRegister').click(function(){
        var lengths=0;
        $('.item').each(function(){
            if($(this).find('span').hasClass('msg-success')){
                lengths++;
            }

        });
        //异步注册提交
        if(lengths==5){
            $.ajax({
                url:"../user/register",
                data:$("#form_register").serialize(),//相当于表单内的提交表单值集合。必须使用到name
                type:"post",
                dataType:"json",
                success:function(obj){
                    if(obj.state==0){
                        console.log(obj.state)
                        $("#namespan").html(obj.message)
                        $("#namespan").attr("class","msg-error")
                    }else if(obj.state==1){
                        console.log(obj.state)
                        window.location = "../user/showLogin"
                    }
                },
                error:function (obj){
                    $("#namespan").html(obj.message)
                    $("#namespan").attr("class","msg-error")
                }
            });
        }

    })
</script>
</body>
</html>

如图所示,这个就是,我修改后的代码,里面button,之前是submit.form的内容页删掉了action.

03-28 17:35