{"id":25122,"date":"2021-05-31T11:04:00","date_gmt":"2021-05-31T08:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25122"},"modified":"2021-10-17T20:31:35","modified_gmt":"2021-10-17T17:31:35","slug":"kuinka-kayttaa-jquery-ajaxia-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-jquery-ajaxia-wordpressissa\/","title":{"rendered":"Kuinka k\u00e4ytt\u00e4\u00e4 jQuery Ajaxia WordPressiss\u00e4"},"content":{"rendered":"

Haluatko ottaa jQuery Ajaxin k\u00e4ytt\u00f6\u00f6n WordPressiss\u00e4? WordPress-aloittelijoille on aina vaikeuksia k\u00e4ytt\u00e4\u00e4 Ajaxia WordPressin kanssa. T\u00e4ss\u00e4 artikkelissa tutkitaan, miten Ajaxia k\u00e4ytet\u00e4\u00e4n WordPressiss\u00e4 ottamalla el\u00e4v\u00e4 esimerkki.<\/p>\n

Miksi tarvitset jQuery Ajaxia verkkosivustolla?<\/h3>\n

Ajax (asynkroninen JavaScript ja XML) sallii verkkosivun p\u00e4ivityksen asynkronisesti. Se tarkoittaa, ett\u00e4 tiedot voivat l\u00e4hett\u00e4\u00e4 ja hakea palvelimelta asynkronisesti h\u00e4iritsem\u00e4tt\u00e4 olemassa olevan sivun n\u00e4ytt\u00f6\u00e4 ja toimintaa. Ajaxia k\u00e4ytt\u00e4m\u00e4ll\u00e4 voit muuttaa pieni\u00e4 tai suuria osia verkkosivusta p\u00e4ivitt\u00e4m\u00e4tt\u00e4 koko sivua. Se auttaa parantamaan k\u00e4ytt\u00f6kokemusta ja samalla s\u00e4\u00e4st\u00e4\u00e4 ylim\u00e4\u00e4r\u00e4ist\u00e4 kuormaa palvelimelle.<\/p>\n

Ajaxista tulee eritt\u00e4in suosittu verkkokehityksess\u00e4. Suurin osa verkkosivustoista k\u00e4ytt\u00e4\u00e4 mieluummin Ajaxia lataamaan sis\u00e4ll\u00f6n dynaamisesti. Muutamien teht\u00e4vien web-kehityksess\u00e4 sinun on k\u00e4ytett\u00e4v\u00e4 Ajaxia ilman mit\u00e4\u00e4n muuta vaihtoehtoa.<\/p>\n

T\u00e4m\u00e4n j\u00e4lkeen katsotaanpa, miten jQuery Ajaxia k\u00e4ytet\u00e4\u00e4n WordPressiss\u00e4.<\/p>\n

P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n

Ajaxin k\u00e4ytt\u00f6\u00f6notto WordPressiss\u00e4 on helppoa ja suoraviivaista. N\u00e4emme siit\u00e4 k\u00e4yt\u00e4nn\u00f6n esimerkin. Otetaan esimerkkin\u00e4 maan ja valtion avattavat valinnat. Kun k\u00e4ytt\u00e4j\u00e4 valitsee maan avattavasta valikosta, kaikki valitulle maalle osoitetut tilat tulisi t\u00e4ytt\u00e4\u00e4 valtion avattavassa valikossa. Ajaxin on teht\u00e4v\u00e4 t\u00e4m\u00e4 k\u00e4ytt\u00e4ytyminen.<\/p>\n

Sen saavuttamiseksi tarvitset 2 taulukkoa – wp_countries ja wp_states. N\u00e4iss\u00e4 taulukoissa sinun on pidett\u00e4v\u00e4 maan ja osavaltioiden v\u00e4linen suhde moniin. Katso alla olevat kuvakaappaukset.<\/p>\n

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

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

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

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

Kun olet valmis tietojen rakentamiseen, luo maa-pudotusvalikko hakemalla tiedot maataulukosta seuraavasti.<\/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
Olemme lis\u00e4nneet luokan ’maat’ valittuun tagiin, jota k\u00e4ytet\u00e4\u00e4n jQuery-koodissa maan tunnuksen saamiseksi. Lis\u00e4sin my\u00f6s tyhj\u00e4n div-luokan luokan ’load-states’, johon tilan pudotusvalikko liittyy saatuaan vastauksen Ajax-puhelusta.<\/p>\n
jQuery Ajax WordPressiss\u00e4<\/h3>\n
Seuraavaksi meid\u00e4n on kirjoitettava jQuery-koodi, joka antaa Ajax-puhelun palvelimelle ja k\u00e4sittelee vastauksen. Ajax-puhelun kirjoittamista varten sinun on sis\u00e4llytett\u00e4v\u00e4 JS-tiedosto. Luo custom.js<\/code>tiedosto js<\/code>aktiivisen teeman hakemistoon. Lis\u00e4\u00e4 t\u00e4m\u00e4 custom.js<\/code>WordPress-ymp\u00e4rist\u00f6\u00f6n k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa koodia, joka menee sis\u00e4lle 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
Kirjoita nyt jQuery-koodi, joka antaa Ajax-puhelun ja liitt\u00e4\u00e4 tilan pudotusvalikon sivulle.<\/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
T\u00e4\u00e4ll\u00e4 ilmoitin data<\/code>muuttujan, joka sis\u00e4lt\u00e4\u00e4 action<\/code>avaimen. action<\/code>Avaimen merkkijonon tulisi olla teht\u00e4v\u00e4l\u00e4ht\u00f6inen. Haemme tiloja, joten pid\u00e4n sen nime\u00e4 get_states_by_ajax. Muut data<\/code>muuttujan elementit ovat yksityiskohdat, jotka tulisi l\u00e4hett\u00e4\u00e4 Ajax-pyynt\u00f6ihin. Tavoitteenamme on hakea valtiota maan perusteella, joten ohitan maatunnuksen avaimella country<\/code>.<\/p>\n
Nyt on aika suorittaa Ajax-puhelut WordPress-tavalla. Lis\u00e4\u00e4 alla olevat kaksi lausetta aktiivisen teeman functions.php<\/code>tiedostoon.<\/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
’wp_ajax’ on kiinte\u00e4 etuliite k\u00e4ytett\u00e4ess\u00e4 Ajaxia WordPressiss\u00e4. Liit\u00e4 sitten toiminnan arvo siihen. Meid\u00e4n tapauksessamme se on get_states_by_ajax. Ensimm\u00e4isest\u00e4 parametrista tuli siis wp_ajax_get_states_by_ajax. Toinen parametri on takaisinkutsutoiminto, johon meid\u00e4n on kirjoitettava todellinen palvelinpuolen koodi. ’wp_ajax_nopriv’ on k\u00e4ytett\u00e4v\u00e4, kun suoritat k\u00e4ytt\u00f6liittym\u00e4n toimintoja.<\/p>\n
Kirjoita get_states_by_ajax_callback<\/code>menetelm\u00e4\u00e4n koodi, joka palauttaa tilan pudotusvalikon. Voit m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4m\u00e4n menetelm\u00e4n functions.php<\/code>tiedostossa.<\/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
Koodiin rakennettu vastaus l\u00e4hett\u00e4\u00e4 sen takaisin jQuerylle. T\u00e4m\u00e4n vastauksen liit\u00e4mme sitten jQueryn avulla div-s\u00e4il\u00f6\u00f6n, jolla on luokan ’load-state’.<\/p>\n
Mene sivullesi ja valitse maa. Sinun pit\u00e4isi n\u00e4hd\u00e4 valtion pudotusvalikko n\u00e4kyviin valitulle maalle.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka k\u00e4ytt\u00e4\u00e4 Ajaxia WordPress-verkkosivustolla. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n