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();表单不是sumbitting。如果我评论它表单是提交但页面正在重新加载。

有谁可以告诉我这个问题是什么？

希望有人可以帮助我。提前致谢。

Answer 1

您应该听取提交事件，您的元素由表单

包围

尝试此活动

  $('#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"。这是因为，当没有提到类型时，默认情况下它将其作为提交按钮。这就是页面重新加载的原因

当表单提交使用jquery ajax时页面正在重新加载

2 个答案: