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">
這里寫成這樣就可以了，但是具體的原因也是一個頭兩個大，不太明白，還請高手賜教！