{"id":28958,"date":"2021-05-31T11:10:00","date_gmt":"2021-05-31T08:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28958"},"modified":"2021-10-17T04:30:27","modified_gmt":"2021-10-17T01:30:27","slug":"hur-man-anvander-jquery-ajax-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-jquery-ajax-i-wordpress\/","title":{"rendered":"Hur man anv\u00e4nder jQuery Ajax i WordPress"},"content":{"rendered":"

Vill du implementera jQuery Ajax i WordPress? WordPress-nyb\u00f6rjare har alltid sv\u00e5rt att anv\u00e4nda Ajax med WordPress. I den h\u00e4r artikeln studerar vi hur man anv\u00e4nder Ajax i WordPress genom att ta ett liveexempel.<\/p>\n

Varf\u00f6r beh\u00f6ver jQuery Ajax p\u00e5 webbplatsen?<\/h3>\n

Ajax (Asynchronous JavaScript And XML) till\u00e5ter en webbsida att uppdateras asynkront. Det betyder att data kan skickas och h\u00e4mtas fr\u00e5n en server asynkront utan att st\u00f6ra visningen och beteendet p\u00e5 den befintliga sidan. Med Ajax kan du \u00e4ndra sm\u00e5 eller stora delar av en webbsida utan att uppdatera hela sidan. Det hj\u00e4lper till att f\u00f6rb\u00e4ttra anv\u00e4ndarupplevelsen och sparar samtidigt en extra belastning p\u00e5 servern.<\/p>\n

Ajax blir extremt popul\u00e4rt inom webbutveckling. De flesta webbplatser f\u00f6redrar att anv\u00e4nda Ajax f\u00f6r att ladda inneh\u00e5llet dynamiskt. I webbutveckling f\u00f6r n\u00e5gra uppgifter m\u00e5ste du anv\u00e4nda Ajax utan n\u00e5got andra alternativ.<\/p>\n

Med detta sagt, l\u00e5t oss se hur man anv\u00e4nder jQuery Ajax i WordPress.<\/p>\n

Komma ig\u00e5ng<\/h3>\n

Det \u00e4r enkelt och enkelt att implementera Ajax i WordPress. Vi kommer att se ett praktiskt exempel p\u00e5 det. Som ett exempel, l\u00e5t oss ta ett fl\u00f6de av land- och delstatsnedg\u00e5ngar. N\u00e4r anv\u00e4ndaren v\u00e4ljer ett land fr\u00e5n rullgardinsmenyn ska alla stater som tilldelats det valda landet fyllas i rullgardinsmenyn. Detta beteende m\u00e5ste g\u00f6ras av Ajax.<\/p>\n

F\u00f6r att uppn\u00e5 det beh\u00f6ver du tv\u00e5 tabeller – wp_countries och wp_states. I dessa tabeller b\u00f6r du beh\u00e5lla f\u00f6rh\u00e5llandet mellan m\u00e5nga och l\u00e4nder. Se nedanst\u00e5ende sk\u00e4rmdumpar.<\/p>\n

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

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

Tabell wp_status<\/strong><\/p>\n

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

N\u00e4r du \u00e4r redo med data skapar du rullgardinsmenyn f\u00f6r land genom att h\u00e4mta data fr\u00e5n landstabellen enligt f\u00f6ljande.<\/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
Vi har lagt till klassen ’l\u00e4nder’ i den valda taggen som kommer att anv\u00e4ndas i jQuery-koden f\u00f6r att f\u00e5 id f\u00f6r ett land. Jag lade ocks\u00e5 till en tom div med klassens ” load-states ” som rullgardinsmenyn f\u00f6r tillst\u00e5nd kommer att l\u00e4ggas till efter att jag f\u00e5tt ett svar fr\u00e5n Ajax-samtalet.<\/p>\n
jQuery Ajax i WordPress<\/h3>\n
D\u00e4refter m\u00e5ste vi skriva en jQuery-kod som ger ett Ajax-samtal till servern och hanterar svaret. F\u00f6r att skriva ett Ajax-samtal b\u00f6r du inkludera JS-filen. Skapa en custom.js<\/code>fil i js<\/code>katalogen f\u00f6r ditt aktiva tema. L\u00e4gg till detta custom.js<\/code>i WordPress-milj\u00f6 med hj\u00e4lp av nedanst\u00e5ende kod som g\u00e5r in i 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
Nu ska vi skriva en jQuery-kod som ger ett Ajax-samtal och l\u00e4gga till rullgardinsmenyn p\u00e5 sidan.<\/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
H\u00e4r f\u00f6rklarade jag en data<\/code>variabel som inneh\u00e5ller en action<\/code>nyckel. Str\u00e4ngv\u00e4rdet f\u00f6r action<\/code>nyckeln b\u00f6r vara uppgiftsorienterat. Vi h\u00e4mtar stater s\u00e5 jag beh\u00e5ller namnet get_states_by_ajax. Andra element av data<\/code>variabel \u00e4r detaljer som ska skickas till Ajax-f\u00f6rfr\u00e5gningar. V\u00e5rt m\u00e5l \u00e4r att h\u00e4mta en stat baserad p\u00e5 land, s\u00e5 jag skickar land-id med nyckeln som country<\/code>.<\/p>\n
Nu \u00e4r det dags att utf\u00f6ra Ajax-samtal p\u00e5 ett WordPress-s\u00e4tt. L\u00e4gg till nedanst\u00e5ende 2 uttalanden i functions.php<\/code>filen f\u00f6r ditt aktiva tema .<\/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’ \u00e4r ett fast prefix n\u00e4r du anv\u00e4nder Ajax i WordPress. L\u00e4gg sedan till \u00e5tg\u00e4rdens v\u00e4rde till den. I v\u00e5rt fall \u00e4r det get_states_by_ajax. S\u00e5 den f\u00f6rsta parametern blev wp_ajax_get_states_by_ajax. Den andra parametern \u00e4r en \u00e5teruppringningsfunktion d\u00e4r vi m\u00e5ste skriva v\u00e5r faktiska server-sida-kod. ’wp_ajax_nopriv’ ska anv\u00e4ndas n\u00e4r du g\u00f6r operationer f\u00f6r frontend.<\/p>\n
I get_states_by_ajax_callback<\/code>metoden skriver du koden som returnerar rullgardinsmenyn f\u00f6r tillst\u00e5ndet. Du kan definiera den h\u00e4r metoden i functions.php<\/code>fil.<\/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
Svaret inbyggt i koden skickar det tillbaka till jQuery. Detta svar l\u00e4gger vi sedan till med hj\u00e4lp av jQuery till div-beh\u00e5llaren som har klass ’load-state’.<\/p>\n
G\u00e5 till din sida och v\u00e4lj land. Du b\u00f6r se att rullgardinsmenyn f\u00f6r staten visas f\u00f6r det valda landet.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du anv\u00e4nder Ajax p\u00e5 WordPress-webbplatsen. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n