Programmeringstips: Ajax anrop till egna (custom) filer i WordPress.

Det här tipset kommer från ett problem som jag kämpat med och inte kunde förstå varför det inte funkade. Men i det här tipset kommer ett till tips. Låt mig börja med det förresten innan jag tar grundtipset… Det är att istället för att använda Ajax (XHR) så använder man sig av det ny WebAPI:t Fetch.

Det finns polyfill så att man behöver inte oroa sig vad gäller bakåtkompatibiliteten. Det enda man kanske skall tänka på är att om det är så att man ska hämta just XML-data så skall man använda sig av metoden text() på den datan som hämtats och sen på den returnerade promise:n med fördel använda jQuerys $.parseXML(xmlString). Kommer exempel på det i ett senare inlägg. Men med det tipset i bakhuvvet om att börja använda fetch så går vi till blogginläggets rubrik.

Jag håller på med ett internt API som använder WordPress funktioner, då är det för autentisering, databasanrop o.s.v. Tycker det är bekvämt att använda mig av ett redan existerande system. Då kan jag kolla efter att man är inloggad exempelvis i WordPress med current_user_can() funktionen. Eller använda sig av $wpdb. Så långt allt väl. Du känner säkert till att man kan få tillgång till WordPress-funktioner i en extern fil genom require_once(‘wp-load.php’).

När det gäller API:t så har jag inte byggt det efter adresshämtning såsom minurl.se/schema/vecka/1. Utan jag gör det genom post requests. Så jag skapade en custom fil som jag anropar via ett WordPress tema. Men vad händer sedan?

Hur ska jag göra för att sessionen skall kvarstå när jag ska anropa filen via XHR, eller som i mitt fall med fetch? Jag förstod det inte i alla fall. Och det tog tyvärr riktigt lång tid innan jag löste det.

Jag vill inte berätta allt vad jag gjorde för att försöka få det att funka, för det kommer jag inte ens ihåg :).

Sen slog det mig…Kanske måste man skicka med en flagga när man gör XHR-anropet. Och javisst, det behöver man.

Om du använder dig av jQuery så är det följande:

$.ajax({ 
url: myUrl, xhrFields: { withCredentials: true } });

Alltså man behöver inkludera withCredentials.

Och om det är med fetch så ser det ut så här:

var promise=fetch(myUrl, { method: "POST", body: formData, credentials: 'include' });

Alltså behöver man ange credentials:’include’, som parameter, när man använder fetch.

Så kära medprogrammerare, om du får någon nytta av detta…varsågod! 😉

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *