Alors AJAX AJAX et AJAX, c'est ce que nous faisons largement de nos jours. Il fait gagner du temps, ajoute dynamique et vous donne une sensation d'utiliser une sorte de logiciel 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.
Que voulez-vous nous besoin?
bibliothèque jQuery (bien sûr)
Un petit script PHP
Voyons a commencé à parler. En jQuery, il ya essentiellement six types de méthode pour effectuer des opérations AJAX. Ce sont
- $. Ajax (options)
- $. Get (url, données, rappel)
- $. GetJSON (url, données, rappel)
- $. GetScript (url, callback)
- load (url, data, callback)
- $. Poste (url, données, rappel,
Outre le numéro 1, toutes les autres méthodes utilisent $. Ajax interne. Cela signifie donc que $. Ajax () est notre fonction de mère pour les opérations AJAX jQuery. Regardons comment $. Ajax () ressemble
msg ) ; } } ) ; Réponse "+ msg);}}); |
C'est plutôt cela. Le paramètre de type prend "GET" ou "POST" qui signifie que vous pouvez envoyer AJAX requestion 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 normal de documents 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="en-US" lang="en-US">
<head>
test de liaison Ajax <title> </ 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 dans le document. Pour une meilleure Menu genre de 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 la liste à l'intérieur d'un objet de liste non triée. Jetez un oeil de plus près les propriétés de la balise <a>. Nous avons href, la classe et l'attribut rel qui ne ressemble en rien différent d'un lien normal. Si vous le voyez, nous avons donné l'attribut rel pour certains noms de div savoir div1, div2 .. ainsi de suite. Cela signifie que nous voulons que la réponse de la href ê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>
<span> DIV -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 seuls liens ayant un nom de classe appelé "ajax_link". L'enfer, nous n'avons pas tous les liens d'une page pour avoir actions Ajax, avons-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;
});
}); |
Permettez-moi de vous expliquer le script un peu. L'événement document.ready est un événement qui est déclenché au chargement de la page. Et puis nous assignons une sorte de code sur l'événement clic sur les liens qui ont une classe "ajax_link". Faire cela current_link $ = $ (this); permet d'avoir l'objet de lien actuel devraient être disponibles dans 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 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énements de clic - puis exécuter et demande AJAX prendre le liens href poperty et charger la réponse dans un div dont l'ID correspond le" "attribut de la rel Link ". Et le return false empêche le travail de lien comme lien normal 
Je veux le 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.
Application facile méthode
Tout reste à peu près le même. Nous allons modifier la méthode ajax ici. Donc, au lieu d'écrire tout le 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é, non? La méthode Load charge le contenu ajax dans l'élément auquel il est attaché. Si $ ("# somediv_id"). Load ("mypage.php"), il va essayer de charger le contenu de l 'mypage.php en elle. Assez simple, hein? Mais je suggère que vous vous habituez à la méthode principale (montré dans la première partie).
Dans le fichier zip il ya un autre fichier appelé ajax2.php qui démontre cette 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 à l'aise avec les opérations AJAX, vous allez créer des magies.
Merci d'avoir lu btw.
Commentaires récents