{"id":28801,"date":"2021-05-31T10:59:00","date_gmt":"2021-05-31T07:59:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28801"},"modified":"2021-10-18T03:38:34","modified_gmt":"2021-10-18T00:38:34","slug":"jak-korzystac-z-jquery-ajax-w-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-korzystac-z-jquery-ajax-w-wordpress\/","title":{"rendered":"Jak korzysta\u0107 z jQuery Ajax w WordPress"},"content":{"rendered":"

Chcesz zaimplementowa\u0107 jQuery Ajax w WordPressie? Pocz\u0105tkuj\u0105cy WordPress zawsze maj\u0105 trudno\u015bci z u\u017cywaniem Ajax z WordPress. W tym artykule uczymy si\u0119, jak u\u017cywa\u0107 Ajax w WordPressie, bior\u0105c przyk\u0142ad na \u017cywo.<\/p>\n

Dlaczego potrzebujesz jQuery Ajax w witrynie?<\/h3>\n

Ajax (asynchroniczny JavaScript i XML) umo\u017cliwia asynchroniczn\u0105 aktualizacj\u0119 strony internetowej. Oznacza to, \u017ce dane mog\u0105 by\u0107 wysy\u0142ane i pobierane z serwera asynchronicznie bez ingerencji w wy\u015bwietlanie i zachowanie istniej\u0105cej strony. U\u017cywaj\u0105c Ajax, mo\u017cesz zmienia\u0107 ma\u0142e lub du\u017ce cz\u0119\u015bci strony internetowej bez od\u015bwie\u017cania ca\u0142ej strony. Pomaga poprawi\u0107 wra\u017cenia u\u017cytkownika, a jednocze\u015bnie oszcz\u0119dza dodatkowe obci\u0105\u017cenie serwera.<\/p>\n

Ajax staje si\u0119 niezwykle popularny w tworzeniu stron internetowych. Wi\u0119kszo\u015b\u0107 stron internetowych woli u\u017cywa\u0107 Ajax do dynamicznego \u0142adowania tre\u015bci. W tworzeniu stron internetowych dla kilku zada\u0144, musisz u\u017cywa\u0107 Ajax bez \u017cadnej drugiej opcji.<\/p>\n

Powiedziawszy to, zobaczmy, jak korzysta\u0107 z jQuery Ajax w WordPressie.<\/p>\n

Pierwsze kroki<\/h3>\n

Wdro\u017cenie Ajax w WordPressie jest \u0142atwe i proste. Zobaczymy tego praktyczny przyk\u0142ad. Jako przyk\u0142ad we\u017amy list\u0119 rozwijanych kraj\u00f3w i stan\u00f3w. Gdy u\u017cytkownik wybierze kraj z listy rozwijanej, wszystkie stany przypisane do wybranego kraju powinny zosta\u0107 wype\u0142nione na li\u015bcie rozwijanej stan\u00f3w. To zachowanie musi by\u0107 wykonane przez Ajax.<\/p>\n

Aby to osi\u0105gn\u0105\u0107 b\u0119dziesz potrzebowa\u0142 2 tabel \u2013 wp_countries i wp_states. W tych tabelach nale\u017cy zachowa\u0107 relacj\u0119 jeden do wielu mi\u0119dzy krajem a stanami. Zapoznaj si\u0119 z poni\u017cszymi zrzutami ekranu.<\/p>\n

Tabela wp_countries<\/strong><\/p>\n

\"Jak<\/a><\/p>\n

Tabela wp_states<\/strong><\/p>\n

\"Jak<\/a><\/p>\n

Gdy b\u0119dziesz gotowy z danymi, zbuduj list\u0119 rozwijan\u0105 kraju, pobieraj\u0105c dane z tabeli kraj\u00f3w w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n

<?php\nglobal $wpdb;\n$aCountries = $wpdb->get_results( \"SELECT id, country FROM \".$wpdb->prefix.\"countries\" );\n\u00a0\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<select class=\"countries\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"\">--<?php _e('SELECT COUNTRY'); ?>--<\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($aCountries as $country) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $country->id; ?>\"><?php echo $country->country; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0<div class=\"load-state\"><\/div>\n<\/form>\n?><\/code><\/pre>\n
Do tagu select dodali\u015bmy klas\u0119 \u201ekraje", kt\u00f3ra b\u0119dzie u\u017cywana w kodzie jQuery w celu uzyskania identyfikatora kraju. Doda\u0142em r\u00f3wnie\u017c pusty div z klas\u0105 'load-states’, do kt\u00f3rego lista stan\u00f3w zostanie do\u0142\u0105czona po otrzymaniu odpowiedzi z wywo\u0142ania Ajax.<\/p>\n
jQuery Ajax w WordPressie<\/h3>\n
Nast\u0119pnie musimy napisa\u0107 kod jQuery, kt\u00f3ry wysy\u0142a wywo\u0142anie Ajax do serwera i obs\u0142uguje odpowied\u017a. Aby napisa\u0107 wywo\u0142anie Ajax, powiniene\u015b do\u0142\u0105czy\u0107 plik JS. Utw\u00f3rz custom.js<\/code>plik w js<\/code>katalogu aktywnego motywu. Dodaj to custom.js<\/code>w \u015brodowisku WordPress za pomoc\u0105 poni\u017cszego kodu, kt\u00f3ry wchodzi do \u015brodka functions.php<\/code>.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_states' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Teraz napiszmy kod jQuery, kt\u00f3ry daje wywo\u0142anie Ajax i do\u0142\u0105cza list\u0119 rozwijan\u0105 stanu do strony.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '.countries', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var countryid = $(this).val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(countryid != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'get_states_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'country': countryid,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.load-state').html(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Tutaj zadeklarowa\u0142em data<\/code>zmienn\u0105, kt\u00f3ra zawiera action<\/code>klucz. Warto\u015b\u0107 ci\u0105gu dla action<\/code>klucza powinna by\u0107 zorientowana na zadanie. Pobieramy stany, wi\u0119c zachowam jego nazw\u0119 jako get_states_by_ajax. Innymi elementami data<\/code>zmiennej s\u0105 szczeg\u00f3\u0142y, kt\u00f3re nale\u017cy przes\u0142a\u0107 do \u017c\u0105da\u0144 Ajax. Naszym celem jest pobranie stanu na podstawie kraju, wi\u0119c identyfikator kraju przekazuj\u0119 kluczem jako country<\/code>.<\/p>\n
Teraz nadszed\u0142 czas na wykonanie wywo\u0142a\u0144 Ajax w spos\u00f3b WordPressa. Dodaj poni\u017csze 2 stwierdzenia w functions.php<\/code>pliku aktywnego motywu .<\/p>\n
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');\nadd_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');<\/code><\/pre>\n
\u201ewp_ajax” to sta\u0142y prefiks podczas u\u017cywania Ajax w WordPressie. Nast\u0119pnie dodaj do niego warto\u015b\u0107 akcji. W naszym przypadku jest to get_states_by_ajax. Tak wi\u0119c pierwszym parametrem sta\u0142 si\u0119 wp_ajax_get_states_by_ajax. Drugi parametr to funkcja zwrotna, w kt\u00f3rej musimy napisa\u0107 nasz aktualny kod po stronie serwera. "wp_ajax_nopriv" powinien by\u0107 u\u017cywany podczas wykonywania operacji dla interfejsu u\u017cytkownika.<\/p>\n
W get_states_by_ajax_callback<\/code>metodzie napisz kod, kt\u00f3ry zwr\u00f3ci list\u0119 rozwijan\u0105 stanu. Mo\u017cesz zdefiniowa\u0107 t\u0119 metod\u0119 w functions.php<\/code>pliku.<\/p>\n
function get_states_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_states', 'security');\n\u00a0\u00a0\u00a0\u00a0$country = $_POST['country'];\n\u00a0\u00a0\u00a0\u00a0global $wpdb;\n\u00a0\u00a0\u00a0\u00a0$aStates = $wpdb->get_results( $wpdb->prepare( \"SELECT id, state_name FROM \".$wpdb->prefix.\"states WHERE cid = %d\", $country) );\n\u00a0\u00a0\u00a0\u00a0if ($aStates) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($aStates as $state) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $state->id; ?>\"><?php echo $state->state_name; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Odpowied\u017a wbudowana w kod ode\u015ble go z powrotem do jQuery. T\u0119 odpowied\u017a nast\u0119pnie do\u0142\u0105czamy za pomoc\u0105 jQuery do kontenera div, kt\u00f3ry ma klas\u0119 \u201eload-state”.<\/p>\n
Wejd\u017a na swoj\u0105 stron\u0119 i wybierz kraj. Powiniene\u015b zobaczy\u0107 list\u0119 rozwijan\u0105 stanu dla wybranego kraju.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak korzysta\u0107 z Ajax na stronie WordPress. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n