Així AJAX AJAX i AJAX, que és el que fem àmpliament en aquests dies. S'estalvia temps, s'afegeix la dinàmica i li dóna una sensació d'utilitzar una aplicació de programari de tipus d'ambient. No tenim moltes maneres d'utilitzar AJAX amb moltes biblioteques. Però com es pot veure aquest lloc és per jQuery, veurem alguns dels usos bàsics o potser avançades d'AJAX.
Què necessitem?
biblioteca jQuery (per descomptat)
Un petit script php
Anem començar a parlar. En jQuery, bàsicament hi ha 6 tipus de mètode per fer les operacions d'AJAX. Aquests són
- $. Ajax (opcions)
- $. Get (url, dades, callback)
- $. GetJSON (url, dades, callback)
- $. GetScript (url, callback)
- càrrega (url, dades, callback)
- $. Lloc (url, dades de devolució de trucada,
A banda del nombre 1, tots els altres mètodes utilitzen $. Ajax internament. Així que això significa $. Ajax () és la nostra funció de mare per a les operacions d'AJAX jQuery. Fem una ullada a com $. Ajax () sembla
msg ) ; } } ) ; Resposta "+ msg);}}); |
Això és el valent. El paràmetre de tipus presa "GET" o "POST", que significa que pot enviar requestion AJAX com POST o GET (prefereixo POSTE sempre). La resta dels paràmetres són bastant explica per si mateix si vostè fes un cop d'ull al codi.
Ara farem un script AJAX petit que llegeix l'enllaç d'etiquetes de hipervincles (<a>) i càrrega de la sol · licitud d'alguns elements div en el document.
Primer agafem un HTML normal del document php que aquest aspecte
<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="ES">
<head>
<title> prova d'enllaç 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> |
Ara anem a afegir alguns enllaços al document. Per a un menú millor tipus de mirada que farem servir un UL> LI i Link. Aquest serà el següent aspecte
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> càrrega en Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> càrrega en Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> càrrega en Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> càrrega en Div 4 </ a> </ li>
</ Ul> |
Com podeu veure hem posat enllaços a elements de la llista dins d'un objecte de llista no ordenada. Feu un cop d'ull més de prop a les propietats de l'etiqueta <a>. Tenim href, classe i atribut rel, que s'assembla en res diferent a una relació normal. Si vostè veu, hem donat l'atribut rel a alguns noms div saber div1, DIV2 .. així successivament. Això vol dir que volem la resposta del href per ser carregat en els divs. Com fer això? Anem a afegir els divs primer
<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> |
I la part real ara - ens hem donat els vincles d'una classe "ajax_link". Només anem a afegir dinàmicament accions ajax només enllaços que tenen un nom de classe anomenat "ajax_link". Dimonis, no tots els enllaços d'una pàgina perquè les accions ajax, oi?
Per tant, la càrrega del document que faríem això.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Feu clic a (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Tipus: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { èxit: function (i) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (i);
}
});
; return false;
});
}); |
Vaig a explicar una mica el guió. L'esdeveniment document.ready és un esdeveniment que s'activa en carregar la pàgina. I llavors estem assignant algun tipus de codis en l'esdeveniment de clic dels enllaços que tenen una mena de "ajax_link". Fer això current_link $ = $ (this); permet tenir l'objecte actual enllaç estigui disponible dins de la funció de devolució de trucada. I tenim
$ ("#" + $ Current_link.attr ("rel")). HTML (i)
el que significa $ ("div_id") html (server_response) i hem establert el paràmetre url de la funció $ ajax dinàmicament amb url: .. $ current_link.attr ("href"). Així que ara tots aquests mitjans "Tots els enllaços que tenen una mena de" ajax_link "- Afegeix un controlador d'esdeveniments clic - després executar i petició AJAX tenint els enllaços href poperty i carrega la resposta en un div el id coincideix amb el" "atribut rel del vincular ". I el return false impedeix l'obra enllaç com a enllaç normal 
Vols veure una acció? Aquí va.
I es pot descarregar el codi font també.
En la següent secció d'aquest petit tutorial utilitzarem la mateixa cosa però amb una mica de comoditat.
D'acord al mètode més fàcil
Tot segueix sent gairebé el mateix. Canviarem el mètode ajax aquí. Així que en lloc d'escriure tot el bloc ajax $. Podem aconseguir el mateix amb el següent.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Feu clic a (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").);
; return false;
});
}); |
És molt menys complicat, no? El mètode de càrrega carrega el contingut ajax dins de l'element al qual està connectat. Si $ ("# somediv_id"). Load ("mypage.php"), que tractarem de carregar el contingut mypage.php 's en ella. Fàcil, no? No obstant això, li suggereixo que s'acostumi al mètode main (mostrat a la primera part).
A l'arxiu zip hi ha un altre arxiu anomenat ajax2.php que demostra aquest Methos que té el mateix resultat.
Així, AJAX no és tan difícil com sembla, oi? Quan vostè es converteix en molt fluid amb les operacions d'AJAX, crearem màgia.
Gràcies per llegir per cert.
Comentaris recents