记一个前端小bug——ajax执行完后页面被刷新

一、问题描述

博主是前端菜鸟，今天写ajax的时候遇到了一个bug，折腾了好久，网上找了一圈最后发现是个小问题导致的。。。不怕丢人把代码放上。

$("#submit1").click(function(){
    var username = $("#username").val();
    var data = {
        "username": username,
    };

    $.ajax({
        url: '/',
        type: 'POST',
        dataType: 'json',
        data: data,
        timeout: 0,
        success:function(ret){
           console.log(ret['result']);
        },
        error:function(ret){
            console.log('failed');
        }
    });
})

<form>
    <textarea id="username" name="username"></textarea>
    <button id="submit1"> 提交 </button>
</form>

描述一下这个bug：我用ajax来Post数据到后端，然后后端返回结果到前端。但每次提交完页面都被刷新，导致我看不到后端发过来的结果，啊真是气死个人。可能你们前端大佬一眼就看出问题了，我懵逼了一个多小时。。。

 

二、问题解决

我特地为了避免在ajax后完成后，表单又重新提交一遍的情况，所以避开使用submit按钮。因此首先表单被提交这个原因被排除了，那还会是什么原因呢？

难道ajax完成后，页面会被刷新？网上查了一下资料，结果是并不会。我擦实在想不到还有啥原因了，就这么简单的几行代码。

最后实在想不到啥原因，应该不会是button这个按钮会提交表单吧？？。。。然后搜了一下，，，结果就是button这个东西搞的鬼！！！没想到你个浓眉大眼的家伙也叛变革命了？？？！！！

button的type有三种：button、reset、submit，如果没写type，默认type不是你以为的“button”，而是“submit”，“submit”，“submit”！！！重要的事情说三遍！！！

 

好了，今天的bug就记录到这里，观众朋友们，下次bug，再会！

 

参考：

https://blog.csdn.net/S_clifftop/article/details/79006971