Mélangez Ajax en HTML avec Intercooler.js
Il n'a jamais été aussi facile de ajouter Ajax à n'importe quel site web. En fait, il est assez courant de créer des sites Web entiers basé sur les demandes Ajax appelé Applications mono-page (ou SPA).
Cependant, cela a toujours nécessité un peu de jQuery et quelques disputes techniques pour mettre à jour le contenu de la page. Si vous avez juste besoin d'un peu fonctionnalité de base Ajax vous pouvez utiliser intercooler.js mélanger ce droit dans votre code HTML.
Intercooler vous permet d’écrire des attributs HTML qui contient nativement les URL de requête Ajax. Lorsque les utilisateurs cliquent sur certains liens, vous pouvez dicter que Les demandes Ajax s'exécutent au lieu de l'action de clic normale.
Tout cela repose sur les attributs HTML5 data- * tel que ic-post-to. Vous pouvez ajouter cet attribut à un bouton ou à un lien d'ancrage. se connecter automatiquement à jQuery pour une demande Ajax POST.
Il y a en fait une page plein de ces attributs sur le site du plugin. Voici un peu de exemple de code pour voir à quoi ça ressemble:
Cliquez moi!
Ce serait envoyer une requête Ajax POST à l'URL / buton_click, et charger la réponse dans l'élément conteneur. Intercooler est une bibliothèque assez simple et incroyablement puissante une fois que vous avez compris son fonctionnement.
Accordé cela ne résoudra pas tous vos problèmes Ajax parce que ne peut pas mettre à jour automatiquement d'autres zones de la page. Ça aussi ne peut pas ajouter trop de fonctionnalités personnalisées sans ralentir la page, donc un détail SPA devrait vraiment utiliser du code Ajax personnalisé.
Intercooler.js offre un manière plus sémantique pour écrire du code Ajax de sorte qu'il charge et offre même un repli natif.
À installer intercooler vous avez juste besoin d'un copie de jQuery avec un copie de la bibliothèque intercooler qui peut être trouvé sur GitHub. Vous pouvez même test sans téléchargement tous les fichiers en utilisant un CDN jQuery et le CDN Intercooler local.
Mettez les deux dans un >
Jetez un coup d'oeil au page de démonstration voir un liste complète des démos vous pouvez jouer avec. J'aime particulièrement la démo "Cliquez pour éditer" car elle montre exactement ce qui est possible et jusqu'où vous pouvez aller avec ce plugin.
Si vous êtes intéressé par Apprendre plus Vérifiez guide de référence plein d'attributs HTML intercooler. Chacun effectue une action différente il est donc crucial de tous les étudier et de voir ce que correspond le mieux pour votre scénario.
Naturellement, vous pouvez trouver tout le code source gratuitement sur GitHub avec un bref guide d'installation.
