Jak ładować Ajax w Wordpressie

Question

Jestem zaznajomiony z używaniem ajax w zwykły sposób z jQuery.
Grałem w to od jakiegoś czasu, ale nie rozumiem, co Wordpress musi zrobić, aby działało ...
To, co tu mam, pochodzi z samouczka lub artykułu.
Jest to functions.php (w motywu dziecka):

// code to load jquery - working fine 

// code to load javascript file - working fine 

// ENABLE AJAX : 
function add_ajax() 
{ 
    wp_localize_script(
    'function', 
    'ajax_script', 
    array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

$dirName = get_stylesheet_directory(); // use this to get child theme dir 
require_once ($dirName."/ajax.php"); 

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php 

add_action('template_redirect', 'add_ajax'); 

Sam jQuery się ładuje i działa poprawnie.

Próbowałem kilka podstawowych ajax jak następuje:

jQuery(document).ready(function($){ 
    $('a.link').click(function(){ 
     $.ajax({ 
       url:  ajax_script.ajaxurl, 
       data: ({action : 'function1'}), 
       success: function(data){ 
        $('#result').html(data); 
       } 
     }); 
     return false; 
    }); 
}); 

Poza tym, nie wiem, jak mogę sprawdzić, czy to jest jeszcze załadowany prawidłowo zacząć ...

Przydałaby się tutaj jakakolwiek pomoc.

EDIT:
w Firebug ten błąd:

ReferenceError: ajax_script is not defined 
     url: ajax_script.ajaxurl, 

Answer 1

jak na swój wniosek Włożyłem w to odpowiedź dla Ciebie.

Jak zasugerował Hieu Nguyen w swojej odpowiedzi, możesz użyć zmiennej ajaxurl javascript w celu odniesienia się do pliku admin-ajax.php. Ta zmienna nie jest jednak zadeklarowana w interfejsie użytkownika. Łatwo to zadeklarować na pierwszym końcu, umieszczając poniższe w nagłówku.php swojego motywu.

<script type="text/javascript"> 
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
</script> 

Jak opisano w dokumentacji Wordpress AJAX, masz dwie różne haki - wp_ajax_ (działania), a wp_ajax_nopriv_ (działanie). Różnica między nimi jest następująca:

• wp_ajax_ (akcja): Jest wywoływane, jeśli wywołanie ajax jest wykonane z poziomu panelu administracyjnego.
• wp_ajax_nopriv_ (akcja): Jest wywoływane, jeśli wywołanie ajax jest wykonane z przodu strony.

Cała reszta została opisana w dokumentacji powiązanej powyżej. Szczęśliwe kodowanie!

P.S. Oto przykład, że praca powinna być wykonana pod. (Nie testowałem)

Zaczepy:

<script type="text/javascript"> 
    jQuery.ajax({ 
     url: ajaxurl, 
     data: { 
      action: 'my_action_name' 
     }, 
     type: 'GET' 
    }); 
</script> 

Powrót koniec:

<?php 
    function my_ajax_callback_function() { 
     // Implement ajax function here 
    } 
    add_action('wp_ajax_my_action_name', 'my_ajax_callback_function'); // If called from admin panel 
    add_action('wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function'); // If called from front end 
?> 

---

UPDATE Mimo to stary odpowiedź, to Wydaje się, że ciągle dostajemy kciuki od ludzi - co h jest świetne! Myślę, że może to być przydatne dla niektórych osób.

WordPress ma funkcję wp_localize_script. Ta funkcja przyjmuje tablicę danych jako trzeci parametr, przeznaczone do tłumaczenia, jak następuje:

var translation = { 
    success: "Success!", 
    failure: "Failure!", 
    error: "Error!", 
    ... 
}; 

Więc to po prostu ładuje obiekt w tagu głowy HTML. To może być wykorzystana w następujący sposób:

Backend:

wp_localize_script('FrontEndAjax', 'ajax', array(
    'url' => admin_url('admin-ajax.php') 
)); 

Zaletą tej metody jest to, że może on być stosowany w obu motywów i wtyczek, jak nie jesteś ciężko kodowania Ajax Zmienna URL do tematu.

Z przodu strony adres URL jest teraz dostępny pod numerem ajax.url, a nie po prostu ajaxurl w poprzednich przykładach.

Answer 2

Po pierwsze, należy dokładnie przeczytać tę stronę http://codex.wordpress.org/AJAX_in_Plugins

Po drugie, nie jest zdefiniowany ajax_script więc należy zmienić na: url: ajaxurl. Nie widzę twojego function1() w powyższym kodzie, ale możesz już zdefiniować go w innym pliku.

I wreszcie, naucz się debugowania wywołań ajax za pomocą karty Firebug, sieci i konsoli będą Twoimi przyjaciółmi. Po stronie PHP, Twoimi przyjaciółmi będą print_r() lub var_dump().

Answer 3

Pomyślałem, że ponieważ plik js był już załadowany, nie musiałem go ładować/ponownie wstawiać w oddzielnej funkcji add_ajax.
Ale to musi być konieczne, albo zrobiłem to i teraz działa.

Mam nadzieję, że pomoże komuś innemu.

Oto poprawiony kod z pytaniem:

// code to load jquery - working fine 

// code to load javascript file - working fine 

// ENABLE AJAX : 
function add_ajax() 
{ 
    wp_enqueue_script(
     'function', 
     'http://host/blog/wp-content/themes/theme/js.js', 
     array('jquery'), 
     '1.0', 
     1 
    ); 

    wp_localize_script(
     'function', 
     'ajax_script', 
     array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

$dirName = get_stylesheet_directory(); // use this to get child theme dir 
require_once ($dirName."/ajax.php"); 

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php 

add_action('template_redirect', 'add_ajax'); 

Answer 4

Osobiście wolę zrobić ajax w wordpress w taki sam sposób, jak zrobić ajax na innej stronie. Tworzę plik php procesora, który obsługuje wszystkie moje żądania ajax i po prostu użyj tego adresu URL. Tak jest, ponieważ htaccess nie jest to możliwe w wordpress, więc robię następujące.

1.in moim pliku .htaccess, który mieszka w moim folderze wp-content i dodaj poniżej tego, co już istnieje

<FilesMatch "forms?\.php$"> 
Order Allow,Deny 
Allow from all 
</FilesMatch> 

W tym przypadku mój plik procesor nazywa forms.php - chcesz umieścić to w swojej wp-content/themes/themeName folder wraz ze wszystkimi innymi plikami, takimi jak header.php footer.php itp. ... po prostu żyje w głównym katalogu.

2.) W moim kodu ajax można następnie używać mojego url jak ten

$.ajax({ 
    url:'/wp-content/themes/themeName/forms.php', 
    data:({ 
     someVar: someValue 
    }), 
    type: 'POST' 
}); 

oczywiście można dodać w dowolnym swoim przed, powodzenia lub błędu typu rzeczy, które chcesz ... ale tak to jest (jak sądzę) łatwiejszy sposób na zrobienie tego, ponieważ unikasz całej głupoty opowiadania wordpress w 8 różnych miejscach, co się stanie, a to pozwala ci również unikać robienia innych rzeczy, które widzisz, gdy ludzie robią, gdzie umieszczają kod js na stronie poziom, aby mogli zanurzyć się w php, gdzie wolę zachować oddzielne pliki js.

Answer 5

Zastosowanie wp_localize_script i przekazać url tam:

wp_localize_script(some_handle, 'admin_url', array('ajax_url' => admin_url('admin-ajax.php'))); 

następnie wewnątrz js, można nazwać to przez

admin_url.ajax_url