Hjemmeside » Coding » Bland Ajax til HTML med Intercooler.js

    Bland Ajax til HTML med Intercooler.js

    Det har aldrig været lettere at tilføj Ajax til ethvert websted. Faktisk er det ret almindeligt at opbygge hele hjemmesider baseret på Ajax-anmodninger hedder Enkeltids Apps (eller SBO'er).

    Men det har altid krævet en smule jQuery og nogle tekniske wrangling til Opdatér sideindhold. Hvis du bare har brug for nogle grundlæggende Ajax funktionalitet du kan bruge intercooler.js at blande dette lige ind i din HTML.

    Intercooler lader dig skrive HTML attributter som Indbygget indeholder Ajax-forespørgselsadresser. Når brugere klikker på bestemte links, kan du diktere det Ajax-anmodninger kører i stedet for den normale klikhandling.

    Alt dette afhænger af HTML5 data- * attributter såsom ic-post-til. Du kan tilføje denne attribut til en knap eller et ankerlink, og det vil Tilslut automatisk til jQuery til en Ajax POST-anmodning.

    Der er faktisk en side fuld af disse attributter på plugin hjemmesiden. Her er lidt af prøvekode for at se, hvordan det ser ud:

    Klik på mig!

    Dette ville send en Ajax POST-anmodning til URL'en / buton_click, og indlæse svaret ind i beholderelementet. Intercooler er et ret simpelt bibliotek og utrolig kraftfuldt, når du forstår hvordan det virker.

    Tildelt dette vil ikke løse alle dine Ajax problemer, fordi det kan ikke automatisk opdatere andre områder på siden. Det også kan ikke tilføje for mange brugerdefinerede funktioner uden at bremse siden, så en detaljeret SPA burde virkelig brug brugerdefineret Ajax kode.

    Intercooler.js tilbyder a mere semantisk måde at skrive Ajax kode på så det belastes og endda tilbyder en indfødt tilbagekaldelse.

    Til installere intercooler du har bare brug for en kopi af jQuery sammen med a kopi af intercooler biblioteket som findes på GitHub. Du kan endda test uden at downloade eventuelle filer ved hjælp af en jQuery CDN og den lokale Intercooler CDN.

    Sæt begge i en > tag i overskriften på din side, og sæt derefter bare HTML-attributterne, hvor du vil!

    Tag et kig på demoside at se en fuld liste over demoer du kan legetøj med. Jeg kan især lide 'Click to Edit'-demoen, fordi den viser præcis, hvad der er muligt, og hvor langt du kan tage dette plugin.

    Hvis du er interesseret i lære mere tjek den reference vejledning fuld af intercooler HTML attributter. Hver og en udfører en anden handling så det er afgørende at studere dem alle og se hvad passer bedst til dit scenario.

    Naturligvis kan du finde alle kildekoden gratis på GitHub sammen med a kort installationsvejledning.