當表單提交使用ngjquery ajax時頁面正在重新加載

Question

我正在嘗試使用jquery ajax提交表單。 我的問題是，當我提交表單提交但我的頁面正在重新加載時。 我嘗試使用preventDefault() 。 但是我仍然無法弄清楚。

這是我的表單的HTML：

<form action="" method="post" id="addCategoryForm">
    <div class="form-group">
        <input type="text" class="form-control" id="new_category" name="new_category" autofocus>
    </div>
    <div class="form-group">
        <select class="form-control" name="parentCategoryList">
            <option value="">-- Parent Category --</option>
            <option value="">Lorem ipsum</option>
            <option value="">Lorem ipsdffum</option>
        </select>   
    </div>      
    <div class="form-group">
        <button class="btn btn-default" id="addCategory">Add New Category</button>
    </div>  
</form> 

這是我使用jQuery嘗試的方式：

$(document).on('click', 'button#addCategory', function (e) {    
    //e.preventDefault();       

    var data = $("form#addCategoryForm").serialize();

    $.ajax({
        type: "POST",
        url: "./includes/process.php",
        data: data,
        cache: false,
        beforeSend: function() {
            window.tr.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function (response) {

            $('#success').html(response);
            $("#success-alert").fadeTo(2000, 500).slideUp(1000, function(){
                $("#success-alert").alert('close');
            });             
        }           
    });

    //return false;

});

當我取消注釋e.preventDefault(); 形式不求和。 如果我發表評論，表單正在提交，但頁面正在重新加載。

誰能告訴我這是什么問題？

希望有人可以幫助我。 提前致謝。

Answer 1

您應該聽一下Submit事件，您的元素用表格括起來

試試這個活動

  $('#addCategoryForm').on('submit', function(e) {
        e.preventDefault();

        //Do ajax here

  }

Answer 2

嘗試這個

<div class="form-group">
    <button type="button" class="btn btn-default" id="addCategory">Add New Category</button>
</div> 

請注意，我添加了type="button" 。 這是因為，當未提及任何類型時，默認情況下會將其作為提交按鈕。 這就是頁面重新加載的原因