Entón, AJAX AJAX e AJAX, que é o que facemos exhaustivamente estes días. El aforrar tempo, aumenta a dinámica e lle dá unha sensación de usar un tipo de aplicación de software de sentir. Alí están moitas formas de usar AJAX con moitas bibliotecas. Pero como se pode ver neste sitio web é para jQuery, imos ollar os básicos, ou que algúns usos AJAX avanzados.
O que necesitamos?
biblioteca jQuery (of course)
Un pequeno script php
Imos comezou a falar. En jQuery, existen basicamente seis tipos de método para facer operacións de AJAX. Son
- $. Ajax (opcións)
- $. Get (url, datos, callback)
- $. GetJSON (url, datos, callback)
- $. GetScript (url, callback)
- carga (url, datos, callback)
- $. Post (url, datos, callback,
Ademais do número un, todos os outros métodos de usar $. Ajax internamente. Entón iso significa que $. Ajax () é a nosa función de nai para operacións de AJAX jQuery. Vexamos como $. Ajax () parece
msg ) ; } } ) ; Response "+ msg);}}); |
Isto é ben iso. O parámetro de tipo leva "get" ou "POST", que significa que pode enviar AJAX requestion como POST ou GET (prefiro sempre POST). O resto dos parámetros son bastante auto-explicativo, se der un ollo ao código novo.
Agora imos facer un pequeno script AJAX que le o enlace de etiquetas de hiperlinks (<a>) e carga a aplicación dalgúns elementos div no documento.
Primeiro imos dar un html normal do documento php que será coma este
<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="PT-BR">
<head>
<title> proba de enlace 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> |
Agora imos engadir algúns enlaces para o documento. Para un mellor tipo de menú ollar usaremos unha UL> LI e Link. Isto vai estar así
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> carga en Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> carga en Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> carga en Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> carga en Div 4 </ a> </ li>
</ Ul> |
Como podes ver, temos poñer enlaces en elementos da lista dentro dun obxecto de lista non ordenada. Bótalle un ollo a propiedades do tag <a>. Temos href, clase e atributo rel parecer nada diferente do que unha conexión normal. Se ves, temos dado o atributo rel para algúns nomes div particular div1, div2 .. así por diante. Isto significa que queremos a resposta do href para ser cargado para estas divs. Como facelo? Imos engadir os divs primeiro
<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> |
E a parte de verdade agora - nós, dadas as conexións dunha clase "ajax_link". Nós só imos engadir dinámicamente accións ajax só enlaces que teñen un nome de clase chamada "ajax_link". Inferno, non todos os enlaces dunha páxina a ter accións ajax, non é?
Entón, sobre a carga documento que fariamos iso.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Preme (function () {
this ) ; $ Current_link = $ (acción);
$. Ajax ({
, type: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { success: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) HTML (e);
}
});
; return false;
});
}); |
Deixe-me explicar o guión un pouco. O evento document.ready é un evento que é disparado na carga da páxina. E, entón, está atribuíndo algún tipo de códigos sobre o evento clic das ligazóns que teñen unha clase "ajax_link". Facendo isto current_link $ = $ (acción); permite ter o obxecto de enlace actual estar dispoñible dentro da función de callback. E nós temos
$ ("#" + $ Current_link.attr ("rel")). Html (e)
o que significa que $ ("div_id") HTML (server_response) e temos que axustar o deixan url da función ajax $ dinámicamente con url: .. $ current_link.attr ("href"). Entón, agora todos os medios "todos estes enlaces que teñen unha clase" ajax_link "- Engadir un click manipulador de eventos - a continuación, executar e levar a solicitude AJAX ligazóns href poperty e cargar a resposta nunha div cuxo id corresponde ao" "atributo rel do conexión ". E o retorno false impide que o traballo ligazón como ligazón normal 
Quero ver unha acción? Aquí vai.
E pode descargar o código fonte tamén.
Na seguinte sección deste pequeno tutorial imos usar o mesmo, pero con un pouco de confort.
Aplicando o método máis fácil
Todo permanece case o mesmo. Nós imos cambiar o método ajax aquí. Entón, en vez de escribir todo o bloque ajax $. Podemos lograr o mesmo co seguinte.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Preme (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (acción) attr ("href").);
; return false;
});
}); |
É moito menos complicado agora, non? O método load carga o contido ajax dentro do elemento que está adxunto. Si $ ("# somediv_id"). Load ("mypage.php"), que vai tentar cargar o contido mypage.php está nel. Moi sinxelo, non é? Pero eu sugiro que acostumar o método main (amosado na primeira parte).
O arquivo zip hai outro ficheiro chamado ajax2.php que demostra esa methos que ten o mesmo resultado.
Entón, AJAX non é tan difícil como parece, non? Cando se fai moi fluente con operacións AJAX, vai crear maxias.
Grazas por ler btw.
Comentarios recentes