页面正在重新加载时提交表格jquery ajax

我想提交一个表单使用jquery ajax。我的问题是，当我提交表单提交，但我的网页正在重新加载。我尝试使用preventDefault()。但我仍然无法弄清楚这一点。页面正在重新加载时提交表格jquery ajax

这是我的形式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。如果我评论它表单正在提交，但页面正在重新加载。

有人可以告诉我这是什么问题吗？

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

来源

2015-06-20 user3733831

你应该听提交事件，你的元素被一种形式

封闭试试这个事件

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

     //Do ajax here 

    }

来源

2015-06-20 03:28:25 Sherlock

是的，它似乎工作。为什么它不适用于点击事件？ – user3733831

表单仍然提交，因为您没有停止它。它的正常形式行为 – Sherlock

试试这个

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

请注意，我已经添加type="button"。这是因为，当没有提及类型时，默认情况下它将其作为提交按钮。这就是页面重新加载的原因

来源

2015-06-20 03:57:54

页面正在重新加载时提交表格jquery ajax

回答

相关问题