form表单中button事件用ajax自动提交表单问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32131937/article/details/81394136

问题描述：
在做用户注册功能时，个人信息用写了一个form表单，其中有个button定义了事件，该事件将手机号发送到servlet，然后向该手机号发送验证码，但是每次访问servlet成功后会提交form表单，百度了一下有人说在ajax回调中写return false或在ajax后return false，结果依旧会提交form表单，还有人说button的type类型写了submit导致，而我的button没有定义type，问题恰恰出在为定义type。
原因：button标签的type需要定义为button，否则会自动提交form表单

<button class="layui-btn" type="button" onclick="sendAuthMessage();">发送验证码</button>

function sendAuthMessage(){
        var phone = document.getElementById("user.phone").value;
         $.ajax({
            url:'/MyWebsite/pushAuthMessages',
            type:'POST',//GET 或POST
            async:true,//false是否异步
            data:{"phone":phone},    
            processData: false, 
            contentType: false,
            dataType:'text',//返回的数据格式类型json/xml/html/script/jsonp/text    （返回的值很关键，如果不是text类型，页面可能会被重写）
            success:function(data){
                alert(1);
            },
            error:function(data){
                alert(2);
            }
        }); 
    }