JQuery Ajaxi kasutamine WordPressis
Kas soovite rakendada jQuery Ajaxi WordPressis? WordPressi algajad leiavad Ajaxi kasutamisel WordPressiga alati raskusi. Selles artiklis uurime, kuidas Ajaxit WordPressis kasutada, võttes otsese näite.
Miks on jQuery Ajaxit vaja veebisaidil?
Ajax (asünkroonne JavaScripti ja XML) võimaldab veebilehte asünkroonselt värskendada. See tähendab, et andmeid saab serverist asünkroonselt saata ja sealt hankida, häirimata olemasoleva lehe kuvamist ja käitumist. Ajaxi kasutades saate muuta väikeseid või suuremaid veebilehe osi kogu lehte värskendamata. See aitab parandada kasutajakogemust ja samal ajal säästab serveris lisakoormust.
Ajax muutub veebiarenduses ülipopulaarseks. Enamik veebisaite eelistab sisu dünaamiliseks laadimiseks kasutada Ajaxi. Mõne ülesande veebiarenduses peate kasutama Ajaxi ilma teise võimaluseta.
Seda öeldes vaatame, kuidas kasutada WordPressis jQuery Ajaxi.
Alustamine
Ajaxi rakendamine WordPressis on lihtne ja lihtne. Näeme selle praktilist näidet. Näiteks võtame riikide ja osariikide rippmenüüde voo. Kui kasutaja valib rippmenüüst riigi, peaksid oleku rippmenüüs olema täidetud kõik valitud riigile määratud olekud. Seda käitumist peab tegema Ajax.
Selle saavutamiseks vajate 2 tabelit – wp_countries ja wp_states. Nendes tabelites peaksite hoidma riigi ja osariikide omavahelisi suhteid. Vaadake allolevaid ekraanipilte.
Tabel wp_ riigid
Tabel wp_states
Kui olete andmetega valmis, koostage riigi rippmenüü, hankides andmed riigitabelist järgmiselt.
<?php
global $wpdb;
$aCountries = $wpdb->get_results( "SELECT id, country FROM ".$wpdb->prefix."countries" );
<form method="post">
<select class="countries">
<option value="">--<?php _e('SELECT COUNTRY'); ?>--</option>
<?php foreach ($aCountries as $country) { ?>
<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
<?php } ?>
</select>
<div class="load-state"></div>
</form>
?>Oleme lisanud klassi „riigid" valitud märgendile, mida kasutatakse riigi ID saamiseks jQuery koodis. Lisasin ka tühja div-i klassi ‘load-state’, millele oleku rippmenüü lisatakse pärast Ajaxi kõnelt vastuse saamist.
jQuery Ajax WordPressis
Järgmisena peame kirjutama jQuery koodi, mis annab Ajaxi kõne serverile ja haldab vastust. Ajaxi kõne kirjutamiseks peaksite lisama JS-faili. Looge custom.jsfail jsoma aktiivse teema kataloogi. Lisage see custom.jsWordPressi keskkonda, kasutades allpool asuvat koodi functions.php.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_states' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Nüüd kirjutame jQuery koodi, mis annab Ajaxi kõne ja lisab lehele oleku rippmenüü.
custom.js
jQuery(function($) {
$('body').on('change', '.countries', function() {
var countryid = $(this).val();
if(countryid != '') {
var data = {
'action': 'get_states_by_ajax',
'country': countryid,
'security': blog.security
}
$.post(blog.ajaxurl, data, function(response) {
$('.load-state').html(response);
});
}
});
});Siin deklareerisin datamuutuja, mis sisaldab actionvõtit. actionVõtme stringi väärtus peaks olema ülesandekeskne. Me toome olekuid, nii et ma hoian selle nime get_states_by_ajax. Muud datamuutuja elemendid on üksikasjad, mis tuleks Ajaxi päringutele saata. Meie eesmärk on hankida riik, mis põhineb riigil, seega edastan riigi ID võtmega country.
Nüüd on aeg Ajaxi kõned WordPressi viisil täita. Lisage oma aktiivse teema functions.phpfaili 2 allpool olevat lauset .
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');‘wp_ajax’ on fikseeritud eesliide ajaxi kasutamisel WordPressis. Seejärel lisage sellele tegevuse väärtus. 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.
Sisestage get_states_by_ajax_callbackmeetodisse kood, mis tagastab oleku rippmenüü. Selle meetodi saate määratleda functions.phpfailis.
function get_states_by_ajax_callback() {
check_ajax_referer('load_states', 'security');
$country = $_POST['country'];
global $wpdb;
$aStates = $wpdb->get_results( $wpdb->prepare( "SELECT id, state_name FROM ".$wpdb->prefix."states WHERE cid = %d", $country) );
if ($aStates) {
?>
<select>
<?php
foreach ($aStates as $state) {
?>
<option value="<?php echo $state->id; ?>"><?php echo $state->state_name; ?></option>
<?php
}
?>
</select>
<?php
}
wp_die();
}Koodi sisseehitatud vastus saadab selle jQueryle tagasi. Seejärel lisame selle vastuse jQuery abil div-konteinerisse, millel on klass ‘load-state’.
Minge oma lehele ja valige riik. Peaksite nägema, et valitud riigi jaoks kuvatakse oleku rippmenüü.
Loodan, et saate aru, kuidas Ajaxi WordPressi veebisaidil kasutada. Palun jagage oma mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.