Donc, AJAX AJAX et AJAX, c'est ce que nous faisons beaucoup ces jours-ci. Il fait gagner du temps, ajoute-t-dynamique et vous donne une idée de l'aide d'un logiciel type de sensation. Il ya des nombreuses façons d'utiliser AJAX avec de nombreuses bibliothèques. Mais comme vous pouvez le voir sur ce site est pour jQuery, nous allons regarder les fondamentaux ou peut-être certains usages AJAX avancés.
Qu'est-ce que vous nous avons besoin?
bibliothèque jQuery (bien sûr)
Un petit script php
Voyons a commencé à parler. En jQuery, il ya essentiellement 6 types de méthode pour faire des opérations AJAX. Ce sont des
- $. Ajax (options)
- $. Get (url, les données, rappel)
- $. GetJSON (url, les données, rappel)
- $. GetScript (url, callback)
- charge (url, les données, rappel)
- $. Poste (url, les données, de rappel,
Outre le numéro 1, toutes les autres méthodes utilisent $. Ajax interne. Cela signifie donc que $. Ajax () est notre fonction maternelle pour les opérations AJAX jQuery. Regardons comment $. Ajax () ressemble à
$. Ajax ({ , Type: "POST", , url: "some.php", , des données: "name = Peter & location = NY", ( msg ) { succès: la fonction (msg) { "Server Response " + msg ) ; alert ("Réponse du serveur" + msg); } });
C'est à peu près il. Le paramètre de type prend "GET" ou "POST" qui signifie que vous pouvez envoyer requestion AJAX comme POST ou GET (je préfère toujours POST). Le reste des paramètres sont assez explicites si vous jetez un oeil à nouveau le code.
Maintenant, nous allons faire un petit script AJAX qui lit le lien de balises de lien hypertexte (<a>) et charge la demande sur certains éléments div dans le document.
Nous prenons d'abord un html normale du document php qui ressemblera à ceci
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="FR"> <head> test de <title> lien Ajax </ title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script> </ Head> <body> </ Body> </ html>
Maintenant, nous allons ajouter quelques liens vers le document. Pour une sorte de menu de mieux regard que nous allons utiliser un UL> LI et Link. Cela va ressembler à ceci
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> charge en Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> charge en Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> charge dans la division 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> charge dans la division 4 </ a> </ li> </ Ul>
Comme vous pouvez le voir, nous avons mis des liens dans les éléments de liste à l'intérieur d'un objet liste non ordonnée. Jetez un coup d'oeil à des propriétés de la balise de <a>. Nous avons href, la classe et attribut rel qui ne ressemble en rien différent d'un lien normal. Si vous le voyez, nous avons donné l'attribut rel à certains noms div savoir DIV1, DIV2 .. ainsi de suite. Cela signifie que nous voulons que la réponse de l'attribut href doit être chargé dans ces divs. Comment faire cela? Ajoutons ces divs premier
<span> DIV -1 </ span> <div id="div1" class="content_loader"> </ div> <span> DIV -2 </ span> <div id="div2" class="content_loader"> </ div> DIV <span> -3 </ span> <div id="div3" class="content_loader"> </ div> <span> DIV -4 </ span> <div id="div4" class="content_loader"> </ div>
Et la partie réelle maintenant - nous avons donné les liens d'une classe "ajax_link". Nous allons seulement ajouter dynamiquement des actions ajax seulement des liens ayant un nom de classe appelé «ajax_link". Enfer, nous n'avons pas tous les liens d'une page pour avoir les actions ajax, faisons-nous?
Ainsi, la charge de documents que nous ferions cela.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Cliquez sur (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , Type: "post", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { succès: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("REL")) html (e); } }); ; return false; }); });
Laissez-moi vous expliquer le script un peu. L'événement est un événement document.ready qui est déclenché au chargement de la page. Et puis nous assignons une sorte de codes sur l'événement de clic sur les liens qui ont une classe "ajax_link". Faire de cette somme current_link = $ (this); permet d'avoir l'objet de lien actuelle sera disponible au sein de la fonction de rappel. Et nous avons
$ ("#" + $ Current_link.attr ("rel")). Html (e)
ce qui signifie $ ("div_id") html (server_response) et nous avons mis le paramètre url de la fonction $ ajax dynamiquement avec url:.. $ current_link.attr ("href"). Alors maintenant, tous les moyens "Tous ces liens qui ont une classe" ajax_link "- Ajoutez un gestionnaire d'événement de clic - puis exécuter et requête AJAX prendre le liens href poperty et charger la réponse dans un div dont l'id correspond à l'attribut" rel "de la lier ". Et le retour false empêche le travail comme lien lien normal 
Tu veux voir une action? Ici, il va.
Et vous pouvez télécharger le code source ainsi.
Dans la prochaine section de ce petit tutoriel nous allons utiliser la même chose mais avec un peu de confort.
L'application de méthode plus facile
Tout reste à peu près la même chose. Nous allons simplement changer la méthode ajax ici. Donc, au lieu d'écrire l'ensemble bloc $. Ajax nous pouvons réaliser la même chose avec le suivant.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Cliquez sur (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) charge ($ (this) attr ("href").); ; return false; }); });
C'est beaucoup moins compliqué maintenant, non? La méthode de chargement charge le contenu ajax au sein de l'élément auquel il est attaché. Si $ ("# somediv_id"). Charge ("mypage.php"), il va essayer de charger le contenu mypage.php qu'il ya dedans. Assez simple, hein? Mais je vous suggère de s'habituer à la méthode main (montré dans la première partie).
Dans le fichier zip il ya un autre fichier appelé ajax2.php qui illustre ce Methos qui a le même résultat.
Donc, AJAX n'est pas aussi difficile que cela puisse paraître, non? Lorsque vous devenez très couramment avec les opérations AJAX, vous allez créer des magies.
Merci d'avoir lu btw.
Commentaires récents