Ajax表单提交不带页面刷新

Question

我只是想将我的表单提交到具有ajax的同一页面而不刷新页面。所以我下面的代码提交表单，但没有选择$ _POST值...我正确提交它。我没有收到任何错误，但我认为我的表单没有提交。

HTML表单

<form action="" id="fixeddonation" name="fixeddonation" method="post"> 


<input type="hidden" class="donerProject" name="donerProject" value="test"> 
<input type="hidden" class="donersubProject" id="donersubProject" name="donersubProject" value="general"> 
<input type="hidden" class="donerLocations" id="donerLocations" name="donerLocations" value="general"> 

<input type="hidden" class="donationpagetype" name="donationpagetype" value="general"> 
<input type="hidden" class="projectadded" id="projectadded" name="projectadded" value="1"> 
<input type="hidden" value="302" id="pageid" name="pageid"> 
<div class="classsetrepet generalfixshow fullrow row fixed-page"> 
<div class="col-6 text-right">  
<div class="prize">Fixed Amount £</div>  
</div> 
<div class="col-6"> 
<input type="text" id="oneoffamt" name="oneoffamt" class="oneoffamt validatenumber"> 
<span class="amt_error"></span> 
</div> 
</div> 

<br> 
<div class="row"> 
<div class="col-6"></div> 
<div class="col-6"> 
<input type="submit" id="submit_gen_one" class="btn-block" value="submit" name="submit_gen_one"> 
</div> 
</div> 
</form> 

Ajax代码

jQuery('#fixeddonation').on('submit', function (e) { 

     e.preventDefault(); 

     jQuery.ajax({ 
      type: 'post', 
      url: 'wp-admin/admin-ajax.php', 
      data: jQuery('#fixeddonation').serialize(), 
      success: function (data) { 
       alert(data); 
       alert('form was submitted'); 
       jQuery('#collapse2').addClass('in').removeAttr('aria-expanded').removeAttr('style'); jQuery('#collapse1').removeClass('in').removeAttr('aria-expanded').removeAttr('style'); 

      } 
     }); 
     return false; 
    }); 

Answer 1

添加正确的值表单的动作标签，并尝试这个办法：

<script> 

$(document).ready(function() { 

var form = $('#fixeddonation'); 

    form.submit(function(ev) { 
    ev.preventDefault(); 


    var formData = form.serialize(); 
    $.ajax({ 
     method: 'POST', 
     url: form.attr('action'), 
     data: formData 
    }) .done(function(data) { 
     alert(data); 
    }); 
    }); 

}); // end .ready() 

</script> 

不需要返回false因为你已经叫做preventDefault（）第一件事