Ajax form submittion in wordpress without page reloading always give me the following error: 400 bad request

Question

I am building a custom template in WordPress and I want to handle form submission using Ajax without page reloading and I always have the following error on my console 400 bad request. The form is not submitting to the server in other to handle the request. I have tried many possibilities but I didn't succeed.

Bellow is the form,is an image upload form

<form enctype="multipart/form-data" method="post" action="">
   <div class="Success-div"></div>
      <p> Vous devez nous fournir un certificat médical valide attestant vos aptitudes à 
       faire partir du club et faire part aux activités du club:</p>
      <p class="statusMsg"></p>
 <div class="form-group">
 <label for="tel">Certificat médical</label><a style= "color:#DAA520;" href="#" 
 id="effectuerTest"> (je ne possède pas un certificat médical)</a>
    <input type="file" name="certificatMedicalMajeur" class="form-control" 
 id="CertificatMedicalfichier" accept="application/pdf" required/>
    </div>
    <input type="submit" name="certificat-majeur-submit" id="submitbtn" class="certificat- 
   majeur-submit btn btn-primary pull-right" value="Enregistrer" />
</form>

Ajax code TO send the submitted data to the server

jQuery(document).on('click', '.certificat-majeur-submit', function (e) {
e.preventDefault();
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var file_data =  $('#CertificatMedicalfichier').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
var $this = $(this);
  jQuery.ajax({
    type: 'POST',
    data: {
      data:form_data,
      action: 'post_md_support_save'
    },
    url: ajaxurl,
    processData : false,
    success: function (response) {
        jQuery('.Success-div').html(data.message);
    },  
    error: function (response) {
      console.log("error form");
    }
    });
});

And finally this is the code to handle the request file in function.php

add_action( 'wp_ajax_post_md_support_save', 'md_abonnements_save' );

add_action( 'wp_ajax_post_md_support_save', 'md_abonnements_save' );

function md_abonnements_save(){

    echo "ajax responding";
    die();
}

Answer 1

如果您在网站的前端使用此代码，您还应该添加 nopriv 操作挂钩： add_action( 'wp_ajax_nopriv_post_md_support_save', 'md_abonnements_save' );