web-dev-qa-db-fra.com

Wordpress Ajax renvoie toujours une erreur 404

Je viens de recevoir ce code d'un tutoriel. Je n'arrive pas à le faire fonctionner.

HTML (home.php)

    <form name="myform" id="myform" action="" method="POST">  
      <!-- The Name form field -->
      <label for="name" id="name_label">Name</label>  
      <input type="text" name="name" id="name" size="30" value=""/>  
      <br>
      <!-- The Email form field -->
      <label for="email" id="email_label">Email</label>  
      <input type="text" name="email" id="email" size="30" value=""/> 
      <br>
      <!-- The Submit button -->
      <input type="submit" name="submit" value="Submit"> 
   </form>
   <!-- We will output the results from process.php here -->
   <div id="results"><div>

PHP (function.php)

    function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');

Javascript (header.php)

    <script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});
</script>
phpjqueryajaxjavascripthtml
2
user1526570

C'était très frustrant à comprendre. J'ai passé des heures sur cette question et j'ai découvert que votre problème se trouvait dans cette entrée:

<input type="text" name="name" id="name" size="30" value=""/>

Essayez de remplacer le nom du champ de saisie par autre chose que "nom", par exemple:

<input type="text" name="user_name" id="name" size="30" value=""/>
6
Dream Ideation

Si vous obtenez un 404 sur la demande AJAX, votre chemin est incorrect. Utilisez admin_url pour construire le chemin plutôt que de le coder en dur.

jQuery.post(<?php admin_url('admin-ajax.php') ?>, // ...

Il vaut probablement mieux imprimer l’adresse URL de l’administrateur dans une variable Javascript via wp_localize_script que de l’imprimer directement dans le modèle. Par exemple:

wp_enqueue_script('jquery');   
wp_localize_script( 'jquery', 'my_ajax_vars', array(
    'ajaxurl'       => admin_url( 'admin-ajax.php' )
);

Vous avez généralement intérêt à enregistrer et enqueuing scripts plutôt que de les écrire directement dans des modèles, en particulier header.php. Comme écrit, ce que votre javascript charge sur chaque page et je doute que cela soit nécessaire sur chaque page.

1
s_ha_dum

Tout d’abord, désinfectez toutes vos données.

Deuxièmement, je vais plutôt faire ceci:

jQuery(function($){
    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            //if you don't have your script localized and you will add it in header.php (not a good practice)
            $.post(
               '<?php echo admin_url('admin-ajax.php); ?>',
               form.serialize(),
               function(data){
                   //just to check the data
                   console.log(data);
                   $('#results').html(data);
               }

            });
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});

Et dans votre fichier php (functions.php):

Assurez-vous d'ajouter die (); à la fin des fonctions.

function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
       die();
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');
0
jepser

Vous avez oublié de mettre votre action (wp) sous la forme ou la fonction jQuery ajax.

ajoutez <input type="hidden" name="action" value="myform"> au formulaire et il sera accroché à vos fonctions ajax.

0
Rob Vermeer