Actualizarea unor elemente din pagină folosind AJAX/JSON

Atunci când scrii o aplicație AJAX, se întâmplă de multe ori să fii nevoit să faci update doar unor anumite părți din site.

Să presupunem că ai un site de social networking în site care arată undeva în header numărul de mesaje trimise, nickname și… ce să mai fie? Ah, și numărul de like-uri date. Cât de util este să ai numărul de mesaje trimise sau numărul de like-uri oferite este mai puțin important, dar, de dragul exemplului, să zicem că e o chestiune de viață și de moarte. :D

Și ca să nu folosim o limbă de lemn, facem un header frumos care să ne zică:

<header>
	<div>Bine ai venit, Ionut. Ai 23 mesaje trimise și 598 like-uri!</div>
</header>

Ok, dacă tot am presupus atâtea, să mai presupunem că intri frumușel în setări să schimbi numele. Nu vreau să mai fiu Ionut, vreau să fiu Bogdan. Cum facem asta fără refresh?

A doua situație (presupusă și asta): trimiți un mesaj. Trimiterea mesajului nu face refresh la pagină, deci ar trebui să actualizăm numărul de mesaje trimise afișat în header, nu?

A treia situație nu o mai povestesc, dar e cam la fel ca primele două, deci nu mai pierdem timpul.

Soluția propusă de mine presupune ușoara modificare a mark-up-ului de mai sus în:

<header>
	<div>Bine ai venit, <span id="update_1">Ionut</span>. Ai <span class="update_2">23</span> mesaje trimise și <span id="update_3">598</span> like-uri!</div>
</header>

Astfel, avem o oarecare referință a ceea ce trebuie actualizat. Dacă ai mai multe elemente de actualizat cu aceleași date, folosești clase în loc de id-uri.

Apelul spre AJAX arată cam așa:

$.getJSON('do_some_awesome_ajax_thing.php', {
	param:	foo,
	query:	bar
}, function(json){
	replaceElements(json);
});

Sigur, poți folosi $.ajax() dacă ai nevoie de mai multe opțiuni (de exemplu, trimiterea datelor prin POST nu GET).

Am dat și exemplu de cum se pot trimite parametrii deoarece am observat că foarte mulți programatori folosesc o metodă ușor… dubioasă:

$.getJSON('do_some_awesome_ajax_thing.php?param='+foo+'&query'+bar, {

Chiar dacă funcționează, această metodă este greu de citit.

JSON

Așa cum probabil bănuiești, serverul întoarce id-ul (sau clasa) elementului, împreună cu noua sa valoare:

[
    {
        "el": "#update_1",
        "val": "Bogdan"
    },
    {
        "el": ".update_2",
        "val": "24"
    },
    {
        "el": "#update_3",
        "val": "600"
    }
]

Interpretarea răspunsului

Tot ce ne mai trebuie este funcția replaceElements() apelată puțin mai sus:

function replaceElements(json) {
	if( typeof( json ) === 'object' ){
		$(json).each(function(){
			$(this.el).html(this.val);
		});
	}
}

Gata!

Păi… e gata. :D

8 Comentarii to “Actualizarea unor elemente din pagină folosind AJAX/JSON”

  1. Foarte bun exemplul. Ar fi si mai usor de inteles daca ai explicat un pic si fisierul php (do_some_awesome_ajax_thing.php). Cred ca un insert intr-o tabela mysql ar fi ideal :).

  2. Staicu Ionuț-Bogdan

    @Stefan: sigur că da. Uite aici ;)

  3. @Ionut : eu ziceam sa faci tu asta, nu in ideea de a explica teoria INSERT-ului, ci de a avea intr-un singur loc tot modul de lucru cu $.get, sa inteleaga fiecare ce se intampla mai departe cu valorile alea si cum sunt returnate inapoi catre user. Am I right?

  4. Staicu Ionuț-Bogdan

    Nu.

  5. Ionut, sa stii ca zice bine StefanZ. Sunt convins ca scopul articolului a fost partea de client side, insa un incepator ar putea avea destule probleme. Ideal ar fi ca orice articol asemanator sa aiba, la final, codul complet (php, sql, html, css, js). Chiar si o arhiva pentru download (plus live demo), dar una care sa contina ceva functional, nu cum se intampla sa descarci vreun tutorial care de la prima accesare te intampina cu erori. Parca ai mai facut tu asa, sa explici codul pe bucati, iar la final sa fie varianta completa.

    Sarind peste faptul ca ti-e lene, stii si tu ca ar fi bine sa fie ceva complet.

  6. Staicu Ionuț-Bogdan

    @msd: dacă nu știi să faci backend-ul, codul de mai sus este inutil.

    Ce relevanță are backend-ul în contextul de mai sus? Dacă site-ul este făcut în ruby sau python (chiar dacă am pus extensia .php)? Trebuie să învăț cum să fac exemple pentru fiecare limbaj server side?

  7. Nu trebuie sa inveti fiecare limbaj, ajunge unul. Mai ales ca PHP este cel mai comun si il stii deja, ar ajunge.

  8. Staicu Ionuț-Bogdan

    Ești invitatul meu să scrii partea de server side :)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter