jsp界面form表单通过定位失败问题

Posted 2020-11-01 逐风一缕

　　问题：在博主写jsp界面是遇到了一个提交问题，那就是在form表单通过button按钮的onclick事件提交时，无论如何都会返回一个请求。所以focus定位一直有问题，每次在定位之后都会重新刷新界面

（简言之：就是form表单中的属性，button按钮也会自动提交数据）：

　　代码如下：

    <form id="register">
        <div><label>手机号&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginId" id="loginId" title="登录账号即为手机号"></span><span class="mark">*</span></div>
        <div><label>登录名&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginName" id="loginName" /></span><span class="mark">*</span></div>
        <div><label>密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginPassword" id="loginPassword" /></span><span class="mark">*</span></div>
        <div><label>确认密码：</label><span><input type="text" /><span class="mark">*</span></span></div>
<!--         <div align="center"><input type="submit" value="确认注册" id="submit"/></div>
 -->        <div align="center"><button onclick="submit1();">确认注册</button></div>
    </form>

script代码如下：

function submit1(){
        var flag = false;
        if($("#loginId").val() == null || $("#loginId").val().trim() == ‘‘){
            alert("登录手机号是登录的id，是一个必填项！");
            $("#loginId").focus();
            flag = true;
            return;
        }
        if($("#loginName").val() == null || $("#loginName").val().trim() == ‘‘){
            alert("登录用户名是一个需填项！");
            $("#loginName").focus();
            flag = true;
            return;
        }
        if($("#loginPassword").val() == null || $("#loginPassword").val().trim() == ‘‘){
            alert("登录密码是一个必填项！");
            $("#loginPassword").focus();
            flag = true;
            return;
        }
        var login = {
                    loginId:$("#loginId").val(),
                    loginName:$("#loginName").val(),
                    loginPassword:$("#loginPassword").val()
            };
        if(flag){
            $.ajax({
                url:‘loginAdd‘,
                type:‘post‘,
                data:login
            });
        }
    }

之后出现的问题是：表单通过function事件一直无法重新定位，之后才发现是表单一直在提交事件。所以在这里产生了一个疑问：

　　解答input    button和submit的区别在下面：

　　　　https://www.zhihu.com/question/20839977

 

之后我就使用了div然后通过ajax请求传输数据

　　代码如下：

　　

<div id="register">
        <div><label>手机号&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginId" id="loginId" title="登录账号即为手机号"></span><span class="mark">*</span></div>
        <div><label>登录名&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginName" id="loginName" /></span><span class="mark">*</span></div>
        <div><label>密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;&nbsp;：</label><span><input type="text" name="loginPassword" id="loginPassword" /></span><span class="mark">*</span></div>
        <div><label>确认密码：</label><span><input type="text" /><span class="mark">*</span></span></div>
<!--         <div align="center"><input type="submit" value="确认注册" id="submit"/></div>
 -->        <div align="center"><button onclick="submit1();">确认注册</button></div>
    </div>

然后界面就不会点击之后就刷新。