Używanie AJAX w wtyczce do WordPressa

Question

Próbuję utworzyć przykładową wtyczkę WordPressa opartą na AJAX. Przeczytałem samouczek i zrobiłem wtyczkę, ale to nie działa. Jestem nowy w AJAX. Oto kod, który próbowałem:

<?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')); 

Użyłem tego jako shortcode, ale nie otrzymałem danych wyjściowych. Co to za błąd?

Answer 1

WordPress środowisko

Przede wszystkim, w celu osiągnięcia tego zadania, zaleca się wtedy zarejestrować enqueue skrypt jQuery, że będzie apelować żądanie do serwera. Te operacje zostaną zawieszone w haku akcji wp_enqueue_scripts. W tym samym haczyku powinieneś umieścić wp_localize_script, który jest używany do dołączania dowolnego JavaScript. W ten sposób będzie dostępny obiekt JS z przodu. Ten obiekt przenosi poprawny adres URL, który ma być używany przez uchwyt jQuery.

Proszę spojrzeć do:

1. wp_register_script(); funkcji
2. wp_enqueue_scripts haka
3. wp_enqueue_script(); funkcji
4. wp_localize_script(); funkcja

W głównym pliku wtyczki, dodać nich.

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'))); 
} 

Plik: jquery.ajax.js

Plik ten sprawia, że ​​wywołanie 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); 
    } 
    }); 
}); 

Dodaj te pliki również w głównym pliku wtyczki.

Wreszcie, na twoim pliku functions.php, powinna być funkcja wywołana przez twoje wywołanie AJAX. Pamiętaj przyrostków:

1. wp_ajax (pozwalają funkcję tylko dla zarejestrowanych użytkowników lub operacji panel administracyjny)
2. wp_ajax_nopriv (umożliwiają funkcję bez użytkowników privilege)

tych przyrostków plus złożeń akcja nazwa Twojego działania:

wp_ajax_myaction lub 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 
} 

Answer 2

Musisz dodać "akcję" do swojego połączenia AJAX.

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

Wartość powinna być taka sama, jak haczyk add_action do wp_ajax. na przykład

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

Umożliwia to WordPressowi określenie, która funkcja ma być uruchamiana po wywołaniu AJAX.

This Codex page has some useful info i this article describes jak lepiej udoskonalić kod, który posiadasz.