php - script - formulario ajax wordpress

Usando AJAX en un plugin de WordPress

Question

Estoy intentando crear un plugin de ejemplo de WordPress basado en AJAX. Leí un tutorial e hice un complemento, pero no funciona. Soy nuevo en AJAX. Aquí está el código que probé:

<?php
class ajaxtest {

    function ajaxcontact() {
        ?>
        <div id="feedback"></div>
        <form name="myform" id="myform">
            <li>
                <label for fname>First Name</label><input type="text" id="fname" name="fname" value=""/>
            </li>
            <li>
                <label for lname>Last Name</label><input type="text" id="lname" name="lname" value=""/>
            </li>
            <input type="submit" value="Submit" id="submit" name="submit"/>
        </form>
        <script type="text/javascript">
            jQuery(''#submit'').submit(ajaxSubmit);

            function ajaxSubmit() {

                var newcontact = jQuery(this).serialize();

                jQuery.ajax({
                    type: "POST",
                    url: "/wp-admin/admin-ajax.php",
                    data: newcontact,
                    success: function(data) {
                        jQuery("#feedback").html(data);
                    }
                });

                return false;
            }
        </script>
        <?php
    }

    function addcontact() {
        $fname = $_POST[''fname''];
        if ($fname != "") {
            echo "Your Data is" . $fname;
        } else {
            echo "Data you Entered is wrong";
        }

        die();
    }

}

function jquery_add_to_contact() {
    wp_enqueue_script(''jquery'');  // Enqueue jQuery that''s already built into WordPress
}

add_action(''wp_enqueue_scripts'', ''jquery_add_to_contact'');
add_action(''wp_ajax_addcontact'', array(''ajaxtest'', ''addcontact''));
add_action(''wp_ajax_nopriv_addcontact'', array(''ajaxtest'', ''addcontact'')); // not really needed
add_shortcode(''cform'', array(''ajaxtest'', ''ajaxcontact''));

Usé esto como un código corto, pero no obtuve una salida. ¿Cuál es el error?

Answer 1

Necesita agregar una ''acción'' a su llamada AJAX.

jQuery.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  data: newcontact,
  action: ''addcontact'',
  success: function(data) {
    jQuery("#feedback").html(data);
  }
});

El valor debe ser el mismo que el de add_action hook para wp_ajax. p.ej

add_action( wp_action_{action_value}, ''myfunc'' );

Esto permite a WordPress saber qué función ejecutar cuando se realiza la llamada AJAX.

Esta página de Codex tiene información útil y este artículo describe cómo refinar mejor el código que tienes.

Answer 2

Entorno de WordPress

En primer lugar, para lograr esta tarea, se recomienda registrar y luego poner en cola un script jQuery que enviará la solicitud al servidor. Estas operaciones se engancharán en el wp_enqueue_scripts acción wp_enqueue_scripts . En el mismo wp_localize_script debe poner wp_localize_script que se usa para incluir JavaScript arbitrario. De esta forma, habrá un objeto JS disponible en el front end. Este objeto lleva la url correcta para ser utilizada por el manejador jQuery.

Por favor, eche un vistazo a:

1. wp_register_script (); función
2. wp_enqueue_scripts hook
3. wp_enqueue_script (); función
4. wp_localize_script (); función

En el archivo de complemento principal, agrégalos.

add_action( ''wp_enqueue_scripts'', ''so_enqueue_scripts'' );
function so_enqueue_scripts(){
  wp_register_script( ''ajaxHandle'', get_template_directory() . ''PATH TO YOUR SCRIPT FILE'', array(), false, true );
  wp_enqueue_script( ''ajaxHandle'' );
  wp_localize_script( ''ajaxHandle'', ''ajax_object'', array( ''ajaxurl'' => admin_url( ''admin_ajax.php'' ) ) );
}

Archivo: jquery.ajax.js

Este archivo hace la llamada AJAX.

jQuery(document).ready( function($){
  //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: ''POST'',
    data:{ 
      action: ''myaction'', // this is the function in your functions.php that will be triggered
      name: ''John'',
      age: ''38''
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

También agregue estos archivos en el archivo principal del complemento también.

Finalmente, en su archivo functions.php, debe haber una función activada por su llamada AJAX. Recuerde los sufijos:

1. wp_ajax (permite la función solo para usuarios registrados o para las operaciones del panel de administración)
2. wp_ajax_nopriv (permitir la función para usuarios sin privilegios)

Estos sufijos más la acción componen el nombre de su acción:

wp_ajax_myaction o wp_ajax_nopriv_myaction

add_action( "wp_ajax_myaction", "so_wp_ajax_function" );
add_action( "wp_ajax_nopriv_myaction", "so_wp_ajax_function" );
function so_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST[''name''];
  echo $_POST[''age''];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}