Blanda Ajax till HTML med Intercooler.js
Det har aldrig varit lättare att lägg till Ajax på vilken webbplats som helst. Det är faktiskt ganska vanligt att bygga hela webbplatser baserat på Ajax-förfrågningar kallad Enkelsidiga Apps (eller SPA).
Men det här har alltid krävt lite jQuery och en del tekniskt skrämmande uppdatera sidinnehåll. Om du bara behöver lite grundläggande Ajax-funktionalitet du kan använda intercooler.js att blanda detta direkt i din HTML.
Intercooler kan du skriva HTML-attribut som Innehållet innehåller Ajax-förfrågningsadresser. När användare klickar på vissa länkar kan du diktera det Ajax-förfrågningar körs istället för den normala klickåtgärden.
Allt detta bygger på HTML5 data- * attribut som ic-post till. Du kan lägga till det här attributet till en knapp eller en ankarlänk, och det ska det Anslut automatiskt till jQuery för en Ajax POST-förfrågan.
Det finns faktiskt en sida full av dessa attribut på pluginwebbplatsen. Här är lite av Provkod för att se hur det ser ut:
Klicka här!
Detta skulle skicka en Ajax POST-begäran till webbadressen / buton_click, och ladda svaret in i behållarelementet. Intercooler är ett ganska enkelt bibliotek och otroligt kraftfullt när du förstår hur det fungerar.
Beviljas detta kommer inte lösa alla dina Ajaxproblem eftersom det kan inte automatiskt uppdatera andra delar av sidan. Det är också kan inte lägga till för många anpassade funktioner utan att sakta ner sidan, så en detaljerad SPA borde verkligen använd anpassad Ajax-kod.
Intercooler.js erbjuder a mer semantiskt sätt att skriva Ajax-kod så att den laddar och till och med erbjuder en naturlig nedgång.
Till installera intercooler du behöver bara en kopia av jQuery tillsammans med a kopia av intercoolerbiblioteket som finns på GitHub. Du kan till och med test utan nedladdning några filer genom att använda en jQuery CDN och den lokala Intercooler CDN.
Sätt båda in i a >
Ta en titt på demos sida att se en fullständig förteckning över demo du kan leka med. Jag gillar särskilt demo-knappen för att redigera eftersom det visar exakt vad som är möjligt och hur långt du kan ta det här pluginet.
Om du är intresserad av lära sig mer kolla in referens guide full av intercooler HTML attribut. Varenda en utför en annan åtgärd så det är viktigt att studera dem alla och se vad passar bäst för ditt scenario.
Naturligtvis kan du hitta all källkod gratis på GitHub tillsammans med a kort installationsguide.
