{"id":25574,"date":"2021-05-31T10:44:00","date_gmt":"2021-05-31T07:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25574"},"modified":"2021-10-17T18:34:44","modified_gmt":"2021-10-17T15:34:44","slug":"jquery-ajaxi-kasutamine-wordpressis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/jquery-ajaxi-kasutamine-wordpressis\/","title":{"rendered":"JQuery Ajaxi kasutamine WordPressis"},"content":{"rendered":"

Kas soovite rakendada jQuery Ajaxi WordPressis? WordPressi algajad leiavad Ajaxi kasutamisel WordPressiga alati raskusi. Selles artiklis uurime, kuidas Ajaxit WordPressis kasutada, v\u00f5ttes otsese n\u00e4ite.<\/p>\n

Miks on jQuery Ajaxit vaja veebisaidil?<\/h3>\n

Ajax (as\u00fcnkroonne JavaScripti ja XML) v\u00f5imaldab veebilehte as\u00fcnkroonselt v\u00e4rskendada. See t\u00e4hendab, et andmeid saab serverist as\u00fcnkroonselt saata ja sealt hankida, h\u00e4irimata olemasoleva lehe kuvamist ja k\u00e4itumist. Ajaxi kasutades saate muuta v\u00e4ikeseid v\u00f5i suuremaid veebilehe osi kogu lehte v\u00e4rskendamata. See aitab parandada kasutajakogemust ja samal ajal s\u00e4\u00e4stab serveris lisakoormust.<\/p>\n

Ajax muutub veebiarenduses \u00fclipopulaarseks. Enamik veebisaite eelistab sisu d\u00fcnaamiliseks laadimiseks kasutada Ajaxi. M\u00f5ne \u00fclesande veebiarenduses peate kasutama Ajaxi ilma teise v\u00f5imaluseta.<\/p>\n

Seda \u00f6eldes vaatame, kuidas kasutada WordPressis jQuery Ajaxi.<\/p>\n

Alustamine<\/h3>\n

Ajaxi rakendamine WordPressis on lihtne ja lihtne. N\u00e4eme selle praktilist n\u00e4idet. N\u00e4iteks v\u00f5tame riikide ja osariikide rippmen\u00fc\u00fcde voo. Kui kasutaja valib rippmen\u00fc\u00fcst riigi, peaksid oleku rippmen\u00fc\u00fcs olema t\u00e4idetud k\u00f5ik valitud riigile m\u00e4\u00e4ratud olekud. Seda k\u00e4itumist peab tegema Ajax.<\/p>\n

Selle saavutamiseks vajate 2 tabelit – wp_countries ja wp_states. Nendes tabelites peaksite hoidma riigi ja osariikide omavahelisi suhteid. Vaadake allolevaid ekraanipilte.<\/p>\n

Tabel wp_ riigid<\/strong><\/p>\n

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

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

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

Kui olete andmetega valmis, koostage riigi rippmen\u00fc\u00fc, hankides andmed riigitabelist j\u00e4rgmiselt.<\/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
Oleme lisanud klassi \u201eriigid" valitud m\u00e4rgendile, mida kasutatakse riigi ID saamiseks jQuery koodis. Lisasin ka t\u00fchja div-i klassi ‘load-state’, millele oleku rippmen\u00fc\u00fc lisatakse p\u00e4rast Ajaxi k\u00f5nelt vastuse saamist.<\/p>\n
jQuery Ajax WordPressis<\/h3>\n
J\u00e4rgmisena peame kirjutama jQuery koodi, mis annab Ajaxi k\u00f5ne serverile ja haldab vastust. Ajaxi k\u00f5ne kirjutamiseks peaksite lisama JS-faili. Looge custom.js<\/code>fail js<\/code>oma aktiivse teema kataloogi. Lisage see custom.js<\/code>WordPressi keskkonda, kasutades allpool asuvat koodi 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
N\u00fc\u00fcd kirjutame jQuery koodi, mis annab Ajaxi k\u00f5ne ja lisab lehele oleku rippmen\u00fc\u00fc.<\/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
Siin deklareerisin data<\/code>muutuja, mis sisaldab action<\/code>v\u00f5tit. action<\/code>V\u00f5tme stringi v\u00e4\u00e4rtus peaks olema \u00fclesandekeskne. Me toome olekuid, nii et ma hoian selle nime get_states_by_ajax. Muud data<\/code>muutuja elemendid on \u00fcksikasjad, mis tuleks Ajaxi p\u00e4ringutele saata. Meie eesm\u00e4rk on hankida riik, mis p\u00f5hineb riigil, seega edastan riigi ID v\u00f5tmega country<\/code>.<\/p>\n
N\u00fc\u00fcd on aeg Ajaxi k\u00f5ned WordPressi viisil t\u00e4ita. Lisage oma aktiivse teema functions.php<\/code>faili 2 allpool olevat lauset .<\/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 fikseeritud eesliide ajaxi kasutamisel WordPressis. Seej\u00e4rel lisage sellele tegevuse v\u00e4\u00e4rtus. Meie puhul on see get_states_by_ajax. Nii sai esimeseks parameetriks wp_ajax_get_states_by_ajax. Teine parameeter on tagasihelistamisfunktsioon, kuhu peame kirjutama oma tegeliku serveripoolse koodi. ‘wp_ajax_nopriv’ tuleks kasutada, kui teete operatsioone eesmises osas.<\/p>\n
Sisestage get_states_by_ajax_callback<\/code>meetodisse kood, mis tagastab oleku rippmen\u00fc\u00fc. Selle meetodi saate m\u00e4\u00e4ratleda functions.php<\/code>failis.<\/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
Koodi sisseehitatud vastus saadab selle jQueryle tagasi. Seej\u00e4rel lisame selle vastuse jQuery abil div-konteinerisse, millel on klass ‘load-state’.<\/p>\n
Minge oma lehele ja valige riik. Peaksite n\u00e4gema, et valitud riigi jaoks kuvatakse oleku rippmen\u00fc\u00fc.<\/p>\n
Loodan, et saate aru, kuidas Ajaxi WordPressi veebisaidil kasutada. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n