{"id":233498,"date":"2023-02-16T17:09:00","date_gmt":"2023-02-16T14:09:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233498"},"modified":"2022-11-11T00:01:07","modified_gmt":"2022-11-10T21:01:07","slug":"guide-hur-man-anvaender-ajax-korrekt-i-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/guide-hur-man-anvaender-ajax-korrekt-i-wordpress\/","title":{"rendered":"Guide: Hur man anv\u00e4nder AJAX korrekt i WordPress"},"content":{"rendered":"\n

AJAX \u00e4r en teknik som du kan anv\u00e4nda i Javascript f\u00f6r att h\u00e4mta data fr\u00e5n servern och uppdatera inneh\u00e5llet p\u00e5 din sida utan att ladda om den i din webbl\u00e4sare. I det h\u00e4r inl\u00e4gget kommer vi att dyka in i hur man anv\u00e4nder AJAX korrekt i WordPress.<\/p>\n

De flesta av er \u00e4r f\u00f6rmodligen bekanta med att utf\u00f6ra AJAX-f\u00f6rfr\u00e5gningar utanf\u00f6r WordPress och vill unders\u00f6ka hur man g\u00f6r det i WordPress. Du kanske undrar \u00f6ver f\u00f6ljande fr\u00e5gor:<\/p>\n

    \n
  1. Vilken URL du ska skicka dina AJAX-f\u00f6rfr\u00e5gningar till i ditt Javascript.<\/li>\n
  2. Hur man faktiskt f\u00e5ngar AJAX-f\u00f6rfr\u00e5gan i PHP, h\u00e4mtar dess data och skickar tillbaka n\u00e5got.<\/li>\n
  3. Se till att dina AJAX-f\u00f6rfr\u00e5gningar \u00e4r s\u00e4kra.<\/li>\n<\/ol>\n

    I WordPress kan du utf\u00f6ra AJAX-f\u00f6rfr\u00e5gningar i admin och\/eller frontend; processen \u00e4r densamma med n\u00e5gra skillnader n\u00e4r det g\u00e4ller att svara p\u00e5 ovanst\u00e5ende fr\u00e5gor. L\u00e5t oss dyka direkt in!<\/p>\n

    Grunderna f\u00f6r att utf\u00f6ra AJAX-f\u00f6rfr\u00e5gan i WordPress<\/h2>\n

    Det f\u00f6rsta du beh\u00f6ver \u00e4r naturligtvis javascriptet dit du vill skicka AJAX-f\u00f6rfr\u00e5gan. Det b\u00f6r st\u00e4llas i k\u00f6 genom att anv\u00e4nda en giltig metod f\u00f6r att l\u00e4gga till skript till WordPress<\/a>, antingen frontend eller backend. Troligtvis har du redan ett skript inst\u00e4llt d\u00e4r du bara beh\u00f6ver delen av att skicka eller beg\u00e4ra n\u00e5got fr\u00e5n WordPress.<\/p>\n

    Att l\u00e4gga upp AJAX i WordPress kr\u00e4ver att du skickar en Javascript-objektvariabel som data till beg\u00e4ran. I objektet m\u00e5ste du tillhandah\u00e5lla minst en egenskap; ’ action<\/code>’. V\u00e4rdet p\u00e5 action<\/code>egenskapen ’ ’ \u00e4r en str\u00e4ng som kan vara (n\u00e4stan) vad du vill. Denna \u00e5tg\u00e4rd \u00e4r vad som talar om f\u00f6r WordPress hur man dirigerar AJAX-f\u00f6rfr\u00e5gan. Men det definierar ocks\u00e5 en del av hook-namnet som du m\u00e5ste haka p\u00e5 i PHP f\u00f6r att hantera AJAX-f\u00f6rfr\u00e5gan.<\/p>\n

    N\u00e4r det g\u00e4ller att svara p\u00e5 fr\u00e5ga 1 ovan: vilken URL ska du skicka din AJAX-f\u00f6rfr\u00e5gan till? Detta skiljer sig beroende p\u00e5 om ditt skript \u00e4r k\u00f6at i admin eller frontend. Eftersom AJAX redan \u00e4r inbyggt i WordPress administrationssk\u00e4rmar kan du helt enkelt anv\u00e4nda den globala variabeln ajaxurl<\/code>. Men f\u00f6r frontend-f\u00f6rfr\u00e5gningar blir det lite mer komplicerat eftersom du m\u00e5ste tillhandah\u00e5lla AJAX URL manuellt tillsammans med ditt Javascript. Mer om det nedan.<\/p>\n

    F\u00f6r att hantera AJAX-f\u00f6rfr\u00e5gningar i PHP kopplar du dig till handlingen wp_ajax_<your action name><\/code>. Om du vill k\u00f6ra AJAX-f\u00f6rfr\u00e5gningar i frontend f\u00f6r icke-inloggade anv\u00e4ndare kan du ocks\u00e5 ansluta till wp_ajax_nopriv_<your action name><\/code>. Mer om det nedan. Inuti din hooked-funktion kan du komma \u00e5t data som skickas fr\u00e5n Javascript genom att referera till $_POST<\/code>arrayen. F\u00f6r att mata tillbaka n\u00e5got ekar du helt enkelt n\u00e5got. Det \u00e4r det korta svaret p\u00e5 fr\u00e5ga 2 ovan.<\/p>\n

    L\u00e5t oss dyka rakt in i koden. Vi b\u00f6rjar med hur man l\u00e4gger till AJAX-f\u00f6rfr\u00e5gningar i adminpanelen.<\/p>\n

    Utf\u00f6r AJAX-f\u00f6rfr\u00e5gningar i WordPress admin<\/h2>\n

    Jag antar att du redan har ett skript i k\u00f6 som reagerar p\u00e5 n\u00e5gon anv\u00e4ndar\u00e5tg\u00e4rd, samlar in data och \u00e4r redo att utf\u00f6ra en AJAX-f\u00f6rfr\u00e5gan, antingen f\u00f6r att uppdatera n\u00e5got eller f\u00f6r att beg\u00e4ra tillbaka lite information fr\u00e5n WordPress. Koden nedan \u00e4r ett mycket f\u00f6renklat exempel; koden k\u00f6ar en Javascript-fil i tema till admin, och inuti Javascript-koden st\u00e4ller den in n\u00e5gra slumpm\u00e4ssiga variabler, utf\u00f6r AJAX vid sidladdning och matar ut svaret i konsolen.<\/p>\n

    add_action('admin_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_send_something',\n        'something': 'Hello world',\n        'another_thing': 14\n    }\n    $.post(ajaxurl, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    Som du kan se i Javascript-koden ovan s\u00e4tter du upp ett Javascript-objekt (t\u00e4nk p\u00e5 det som en array) med all data du vill skicka vidare, inklusive den viktiga ’ action<\/code>’-egenskapen.<\/p>\n
    Ocks\u00e5 som n\u00e4mnts ovan, eftersom AJAX redan \u00e4r inbyggt i WordPress administrationssk\u00e4rmar, anv\u00e4nder du helt enkelt den globala variabeln ajaxurl<\/code>som AJAX URL.<\/p>\n
    Nu l\u00e4gger vi till kod f\u00f6r att acceptera denna AJAX-f\u00f6rfr\u00e5gan i PHP. Eftersom jag angav ’ awhitepixel_send_something<\/code>’ som v\u00e4rdet av ’ action<\/code>’ m\u00e5ste jag haka p\u00e5 wp_ajax_awhitepixel_send_something<\/code>.<\/p>\n
    add_action('wp_ajax_awhitepixel_send_something', function() {\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n    wp_die();\n});<\/code><\/pre>\n
    Inuti din hooked-funktion har du full tillg\u00e5ng till WordPress; du kan anv\u00e4nda alla WordPress-funktioner, fr\u00e5gor och komma \u00e5t globala variabler (t.ex. $wpdb<\/code>f\u00f6r databasfr\u00e5gor). Alla variabler du skickade i Javascript kommer att vara tillg\u00e4ngliga i $_POST<\/code>array med nycklarna du angav i Javascript-objektet.<\/p>\n
    Det \u00e4r valfritt att skicka tillbaka n\u00e5got till Javascript (till exempel n\u00e4r du bara vill skicka en beg\u00e4ran om att uppdatera eller spara n\u00e5got och inte beh\u00f6ver bekr\u00e4ftelse). Om du vill skicka tillbaka n\u00e5got, helt enkelt echo<\/code>din produktion. F\u00f6r att mata ut mer komplexa variabler \u00e4n bara en str\u00e4ng b\u00f6r du returnera den som en json-kodad array s\u00e5 att Javascript kan l\u00e4sa och analysera den ordentligt. N\u00e5got som det h\u00e4r;<\/p>\n
    $pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\n
    En viktig sista anm\u00e4rkning p\u00e5 sista raden; wp_die()<\/code>. Alla AJAX-\u00e5teruppringningsfunktioner b\u00f6r "st\u00e4nga tr\u00e5den" eller avslutas ordentligt genom att g\u00f6ra die()<\/code>eller exit()<\/code>. I WordPress anv\u00e4nder vi wp_die()<\/code>f\u00f6r korrekt integration men resultatet \u00e4r detsamma. Om du r\u00e5kar f\u00e5 konstig "0" i dina AJAX-svar, beror det mest troligt p\u00e5 att du gjorde det inte wp_die()<\/code>eller die()<\/code>… Se alltid till att "du d\u00f6r" i slutet av alla funktioner kopplade till wp_ajax<\/code>.<\/p>\n
    Utf\u00f6ra AJAX-f\u00f6rfr\u00e5gningar i WordPress-gr\u00e4nssnittet<\/h2>\n
    Processen att utf\u00f6ra AJAX i frontend \u00e4r densamma som i admin, men n\u00e5got mer komplicerad n\u00e4r det g\u00e4ller att svara p\u00e5 fr\u00e5ga 1: vilken URL ska AJAX posta till. I exemplet ovan f\u00f6r att utf\u00f6ra AJAX i admin hade vi redan en global Javascript-variabel, ajaxurl<\/code>, men denna variabel \u00e4r inte tillg\u00e4nglig frontend. Vi m\u00e5ste tillhandah\u00e5lla det sj\u00e4lva. F\u00f6r att f\u00e5 v\u00e4rdet av WordPress AJAX URL anv\u00e4nder du admin_url('admin-ajax.php')<\/code>(ja, "admin url" f\u00f6r frontend).<\/p>\n
    N\u00e4r du st\u00e4ller i k\u00f6 f\u00f6r ett frontend-skript som kommer att utf\u00f6ra AJAX-f\u00f6rfr\u00e5gningar i ditt tema eller plugin, m\u00e5ste du skicka WordPress AJAX URL som variabel till det Javascriptet, genom att anv\u00e4nda wp_localize_script()<\/code>.<\/p>\n
    add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php')\n    ];\n    wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
    Nu, i ditt Javascript, har du tillg\u00e5ng till ett globalt Javascript-objekt Theme_Variables<\/code>(det h\u00e4r namnet kan vara vad du vill), med WordPress’ AJAX URL som v\u00e4rde till ajax_url<\/code>egenskapen ’ ’. Din AJAX-funktion skulle vara ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_frontend_stuff',\n        'something': 'Hello world',\n        'another_thing': 14\n    }\n    $.post(Theme_Variables.ajax_url, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    N\u00e4r du hanterar AJAX i frontend finns det ytterligare en sak att t\u00e4nka p\u00e5 n\u00e4r det g\u00e4ller kroken du anv\u00e4nder f\u00f6r att acceptera AJAX-f\u00f6rfr\u00e5gningar. Du hakar fortfarande p\u00e5 wp_ajax_<your action name><\/code>, men den h\u00e4r kroken fungerar bara f\u00f6r bes\u00f6kare som \u00e4r inloggade. Om du vill utf\u00f6ra AJAX-f\u00f6rfr\u00e5gningar f\u00f6r bes\u00f6kare som inte \u00e4r inloggade m\u00e5ste du (\u00e4ven) haka p\u00e5 wp_ajax_nopriv_<your action name><\/code>. Normalt f\u00f6r frontend AJAX-f\u00f6rfr\u00e5gningar som kr\u00e4vs f\u00f6r att temat ska fungera korrekt skulle du koppla in b\u00e5da och peka dem b\u00e5da till samma funktion.<\/p>\n
    add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n    wp_die();\n}<\/code><\/pre>\n
    N\u00e4r det g\u00e4ller inneh\u00e5llet i din AJAX-anslutna funktion \u00e4r det samma som f\u00f6r adminf\u00f6rfr\u00e5gningar. Du har fullst\u00e4ndig tillg\u00e5ng till WordPress, f\u00e5r tag p\u00e5 \u00f6verf\u00f6rda variabler fr\u00e5n $_POST<\/code>, returnerar eventuellt n\u00e5got genom att utf\u00f6ra echo<\/code>, och du b\u00f6r alltid, alltid komma ih\u00e5g att "d\u00f6" med wp_die()<\/code>i slutet.<\/p>\n
    S\u00e4kra dina AJAX-f\u00f6rfr\u00e5gningar<\/h2>\n
    Eftersom AJAX g\u00f6r det s\u00e5 enkelt att \u00f6verf\u00f6ra data mellan skript och backend, b\u00f6r du definitivt vidta n\u00f6dv\u00e4ndiga \u00e5tg\u00e4rder f\u00f6r att g\u00f6ra din kod s\u00e4ker. Det inkluderar att sanera all data innan du sparar den, men ocks\u00e5 att anv\u00e4nda WordPresss "nonce"-funktionalitet f\u00f6r att kontrollera om f\u00f6rfr\u00e5gningarna kommer fr\u00e5n aktuella och accepterade platser. L\u00e4s WordPress dokumentation p\u00e5 nonce<\/a> om du inte \u00e4r bekant med den.<\/p>\n
    Grundf\u00f6ruts\u00e4ttningen \u00e4r denna; du anv\u00e4nder en WordPress-metod genom att antingen generera ett nonce-v\u00e4rde (wp_create_nonce()<\/code>) eller skapa ett dolt inmatningsf\u00e4lt med nonce-v\u00e4rdet (wp_nonce_field()<\/code>). I din AJAX-f\u00f6rfr\u00e5gan f\u00f6r du vidare nonce-v\u00e4rdet (som kodas av WordPress) i beg\u00e4ran, och i den accepterande delen (wp_ajax_<\/code>kroken) verifierar du nonce-v\u00e4rdet med det du ursprungligen st\u00e4llde in.<\/p>\n
    L\u00e5t oss l\u00e4gga till lite s\u00e4kerhet till exempelkoden vi gjorde ovan. F\u00f6rst genererar vi en nonce och skickar den i v\u00e5r wp_localize_script<\/code>tillsammans med AJAX URL. Som parameter till wp_create_nonce()<\/code>st\u00e4ller vi in \u200b\u200bn\u00e5gon unik str\u00e4ng som bara vi borde veta om, s\u00e5 att s\u00e4ga. I exemplet nedan g\u00e5r jag f\u00f6r ’ awhitepixel-nonce<\/code>’.<\/p>\n
    add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'nonce' => wp_create_nonce('awhitepixel-nonce')\n    ];\n    wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
    Det som skickas som ’ nonce<\/code>’ i v\u00e5ra Javascript-variabler till frontend \u00e4r ett slumpm\u00e4ssigt tal som genereras av WordPress. Ingen utom vi, f\u00f6rfattare till detta manus, vet att den giltiga nonce \u00e4r ’ awhitepixel-nonce<\/code>’. I v\u00e5rt Javascript h\u00e4mtar vi nonce-v\u00e4rdet och skickar det direkt tillbaka i v\u00e5r AJAX-f\u00f6rfr\u00e5gan:<\/p>\n
    jQuery(document).ready(function($) {\n    var data = {\n        'action': 'awhitepixel_frontend_stuff',\n        'something': 'Hello world',\n        'another_thing': 14,\n        'nonce': Theme_Variables.nonce\n    }\n    $.post(Theme_Variables.ajax_url, data, function(response) {\n        console.log(response);\n    });\n});<\/code><\/pre>\n
    Och slutligen i v\u00e5r wp_ajax<\/code>hooked funktion b\u00f6r vi b\u00f6rja med att kontrollera om nonce var giltig med wp_verify_nonce()<\/code>. Vi tillhandah\u00e5ller den unika str\u00e4ngen vi st\u00e4llt in ovan, och om WordPress inte matchar det unika kodade v\u00e4rdet som skickas med denna str\u00e4ng, avslutar vi omedelbart:<\/p>\n
    add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n        wp_die(-1);\n    }\n\u00a0\n    $something = $_POST['something'];\n    $another_thing = (int) $_POST['another_thing'];\n\u00a0\n    echo 'You sent '. $something. ' with '. $another_thing;\n    wp_die();\n}<\/code><\/pre>\n
    Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
    I den h\u00e4r guiden kommer vi att dyka in i hur du anv\u00e4nder AJAX korrekt i WordPress. Vi g\u00e5r igenom hur man l\u00e4gger till AJAX-f\u00f6rfr\u00e5gningar i admin och frontend, och hur man hanterar s\u00e4kerhet.<\/p>\n","protected":false},"author":1,"featured_media":224900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,724,838,848,901,1110,807,807,838,848,724,868,868],"tags":[1173],"class_list":{"0":"post-233498","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koda","8":"category-utvecklaren","9":"category-guide-foer-nyboerjare","10":"category-handledningar","12":"category-n-a","13":"category-php-9","18":"category-wordpress-9","20":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233498"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}