ajax表单提交执行成功但是没有执行回调函数，并且post变get了

因为一时的疏忽，在写表单提交的时候写成了这样：

<form id="addEssaysForm">
                    
      <label for="essaysTitle">标题</label>
      <input type="text" class="form-control" name="essaysTitle" id="essaysTitle" placeholder="请输入标题">
                                                            
      <label>内容</label>
      <textarea class="form-control" name="essaysContent" rows="15" style="resize: none"></textarea>
                           
      <button id="addBtn">提交</button>
</form>

<script>
$("#addBtn").click(function () {
    $.ajax({
        type:"POST",
        dataType:"json",
        url:"add",
        data: $('#addEssaysForm').serialize(),
        success: function (data) {
            console.log(data);
            alert(data.msg);
        },
        error : function(result) {
            alert("系统异常！"+result);
        }
    });
});

</script>

这样发现一直不走回调函数，而且提交的内容在地址栏显示出来了，明明使用的post提交的啊！

百度了好久，后来才发现是form表单这出了问题，平时很少写前端代码，犯了这样的错误。正确的写法应该是这样的：

<form id="addEssaysForm" onsubmit="return false" action="##" method="post">
                    
      <label for="essaysTitle">标题</label>
      <input type="text" class="form-control" name="essaysTitle" id="essaysTitle" placeholder="请输入标题">
                                                            
      <label>内容</label>
      <textarea class="form-control" name="essaysContent" rows="15" style="resize: none"></textarea>
                           
      <button id="addBtn">提交</button>
</form>

<script>
$("#addBtn").click(function () {
    $.ajax({
        type:"POST",
        dataType:"json",
        url:"add",
        data: $('#addEssaysForm').serialize(),
        success: function (data) {
            console.log(data);
            alert(data.msg);
        },
        error : function(result) {
            alert("系统异常！"+result);
        }
    });
});

</script>

<form id="addEssaysForm" onsubmit="return false" action="##" method="post">
这里写成这样就可以了，但是具体的原因也是一个头两个大，不太明白，还请高手赐教！