Смесете Ajax в HTML с Intercooler.js

Никога не е било по-лесно добавете Аякс към всеки уебсайт. Всъщност е доста често да се изграждат цели уебсайтове базирани около Ajax заявки Наречен Приложения на една страница (или SPA).

Това обаче винаги е изисквало малко jQuery и някои технически спорове актуализира съдържанието на страницата. Ако просто имате нужда от малко основната функционалност на Ajax можеш да използваш intercooler.js да смесите това право в HTML.

Интеркулерът ви позволява да пишете HTML атрибути естествено съдържат URL адреси за искане на Ajax. Когато потребителите кликнат върху определени връзки, можете да го диктувате Ajax исканията се изпълняват вместо нормалното действие за кликване.

Това е всичко разчита на HTML5 данни- * атрибути като IC-пост-до. Можете да добавите този атрибут към бутон или котва, и той ще бъде автоматично се свързва с jQuery за AJAX POST заявка.

Всъщност има страница пълни с тези атрибути на уебсайта на плъгина. Ето малко примерен код за да видим как изглежда:

Кликни върху мен!

Това щеше изпрати AJAX POST заявка към URL адреса / buton_click, и заредете отговора в контейнерния елемент. Интеркулерът е доста проста библиотека и невероятно мощна, след като разберете как работи.

Разбира се, това няма да реши всичките ви проблеми с Ajax, защото то не могат да се актуализират автоматично други области на страницата. То също не може да добави твърде много персонализирани функции без да забавя страницата, толкова подробна SPA трябва наистина използвайте потребителски Ajax код.

Intercooler.js предлага a по-семантичен начин за писане на код Ajax така че се зарежда и дори предлага оригинален резервен.

Да се инсталирайте интеркулер просто трябва копие на jQuery заедно с a копие на интеркулер библиотеката които могат да бъдат намерени в GitHub. Можете дори тест без изтегляне всички файлове с помощта на jQuery CDN и местния интеркулер CDN.

Поставете и двете в a > свободен край в заглавието на страницата си, и след това просто поставете HTML атрибутите, където пожелаете!

Погледни страница с демонстрации за да видите a пълен списък на демонстрациите можете да си поиграете. Особено ми харесва демо "Click to Edit", защото показва точно какво е възможно и колко далеч можете да вземете този плъгин.

Ако се интересувате учене повече разгледайте справочник пълни с интеркулер HTML атрибути. Всеки един изпълнява друго действие така че е от решаващо значение да ги изучаваш и да видиш какво пасва най-добре за вашия сценарий.

Естествено, можете да намерите целия изходен код безплатно на GitHub заедно с кратко ръководство за инсталиране.