Miksuj Ajax do HTML z Intercooler.js

Nigdy nie było łatwiej dodaj Ajax do dowolnej strony internetowej. W rzeczywistości budowanie całych witryn jest dość powszechne oparte na żądaniach Ajax nazywa Aplikacje jednostronicowe (lub SPA).

Jednak zawsze wymagało to trochę jQuery i sporów technicznych zaktualizuj zawartość strony. Jeśli po prostu potrzebujesz podstawowa funkcjonalność Ajax możesz użyć intercooler.js zmieszać to prawo z HTML.

Intercooler pozwala ci pisać atrybuty HTML natywnie zawiera adresy URL żądań Ajax. Gdy użytkownicy klikają określone linki, możesz to dyktować Żądania Ajax działają zamiast normalnej akcji kliknięcia.

To wszystko opiera się na atrybutach danych * HTML5 Jak na przykład ic-post-to. Możesz dodać ten atrybut do przycisku lub linku do kotwicy, a to się stanie automatycznie łączy się z jQuery dla żądania POJA Ajax.

W rzeczywistości jest strona pełen tych atrybutów na stronie wtyczki. Oto trochę przykładowy kod aby zobaczyć, jak to wygląda:

Kliknij!

To by wyślij żądanie Ajax POST do adresu URL / buton_click, i załaduj odpowiedź do elementu kontenera. Intercooler to bardzo prosta biblioteka i niezwykle potężna, gdy zrozumiesz, jak to działa.

Oczywiście nie rozwiąże to wszystkich twoich problemów z Ajaxem nie można automatycznie aktualizować innych obszarów strony. To także nie można dołączyć zbyt wielu niestandardowych funkcji bez spowalniania strony, więc szczegółowy SPA powinien naprawdę użyj niestandardowego kodu Ajax.

Intercooler.js oferuje bardziej semantyczny sposób pisania kodu Ajax tak, że ładuje, a nawet oferuje natywny system rezerwowy.

Do zainstaluj intercooler po prostu potrzebujesz kopia jQuery wraz z kopia biblioteki intercoolera które można znaleźć na GitHub. Możesz nawet przetestuj bez pobierania wszelkie pliki za pomocą CDN jQuery i lokalnego CDN Intercooler.

Umieść oba w > etykietka w nagłówku strony, a następnie po prostu umieść atrybuty HTML w dowolnym miejscu!

Rzuć okiem na strona demonstracyjna zobaczyć pełna lista pokazów możesz się bawić. Szczególnie podoba mi się demo „Kliknij, aby edytować”, ponieważ pokazuje dokładnie, co jest możliwe i jak daleko możesz wziąć tę wtyczkę.

Jeśli jesteś zainteresowany uczyć się więcej Sprawdź przewodnik referencyjny pełen atrybutów HTML intercooler. Każdy wykonuje inną akcję dlatego ważne jest, aby przestudiować je wszystkie i zobaczyć, co najlepiej pasuje dla twojego scenariusza.

Oczywiście możesz znaleźć cały kod źródłowy za darmo na GitHub wraz z a krótki przewodnik instalacji.