Share
Un nor-tag este o modalitate excelentă de a afișa vizitatorilor blogului dvs. principalele subiecte de interes care sunt disponibile. Există, de asemenea, informații suplimentare conținute într-un tag-cloud. În afară de legăturile reale, care oferă oamenilor o idee despre subiectele acoperite de site-ul dvs., ele pot arăta cât de populare sunt subiectele diferite. Un alt lucru minunat despre nivelele de tag-uri este că pot fi folosite pentru a descrie frecvența a ceva; puteți să vă conectați la articole, postări de blog, imagini, video sau orice altceva pe care îl aveți în abundență pe site-ul dvs..
Etichetele-nori sunt ușor de făcut prost; fie dintr-o perspectivă de proiectare, fie dintr-o perspectivă a codului. Datorită jQuery, este ușor de făcut și bine. Vom folosi noua variantă fierbinte 1.3 a jQuery pentru acest exemplu și vom lucra cu PHP și MySql pentru a furniza un feed JSON al etichetelor noastre. Obținerea etichetelor într-o bază de date în primul rând este dincolo de sfera de aplicare a acestui tutorial, dar este o chestiune suficient de simplă pentru a le prelua și a le transmite pe o pagină de așteptare prin AJAX.
Să începem pe pagina pe care va fi afișat noul tag; într-un fișier nou din editorul dvs. de text, creați următoarea pagină:
jQuery Tag Cloud Nor de etichete
Salvați acest lucru ca tagcloud.html. În acest stadiu, nu avem aproape nimic pe pagină, doar un container simplu pentru cloud tag și o poziție de nivel 2 în interiorul containerului. Orice alte elemente de care avem nevoie pot fi create ca și când sunt necesare. Legăm o foaie de stil în cap pentru un stil pe care îl vom adăuga mai târziu, iar la sfârșitul corpului ne vom conecta la jQuery. Facem cererea pentru răspunsul JSON într-un bloc de script personalizat după referința la jQuery.
Folosim aliasul $ pentru a apela metoda getJSON jQuery, care este o abstractizare de nivel superior a metodei ajax; în mod normal, metodele jQuery sunt numite pe obiecte care sunt trimiteri la elemente, dar pentru că nu facem referire la niciun element, putem folosi în schimb aliasul jQuery. Acest lucru înseamnă, de asemenea, că obiectul jQuery nu va fi returnat de către metodă. În schimb, xmlHTTPRequest este trecut înapoi.
Metoda getJSON acceptă două argumente în acest exemplu (deși mai multe pot fi folosite dacă este necesar); prima este adresa URL la care facem cererea. Deoarece vom primi un obiect JSON, este logic să folosiți getJSON. Am putea folosi metoda ajax, dar ar trebui să configureze mai multe proprietăți ale cererii (cum ar fi dataType), astfel că, folosind acest lucru, ne economisim un pic de timp și de codificare. La sfârșitul adresei URL se specifică un callback JSONP -? Callback =? - care va permite browserului să manipuleze direct obiectul JSON, chiar dacă provine dintr-un alt domeniu, fără nicio prelucrare suplimentară de la server.
Al doilea argument este funcția callback pe care dorim să o executăm odată ce obiectul este returnat paginii. Nu am pus încă niciun cod în această funcție, deoarece nu avem obiectul JSON cu care să lucrăm. Putem reveni la această pagină într-un timp cât vom scrie PHP. Am spus acum un moment că nu este necesară nicio prelucrare pe partea de server atunci când lucrați cu callback-uri JSONP și totuși acum vom merge și vom scrie câteva PHP-uri. Acest lucru este doar pentru că nimeni nu furnizează datele pe care le dorim. Deci trebuie să le creăm noi înșine. Dacă cineva furnizează un flux JSON de etichete populare, am putea folosi în continuare același cod jQuery pentru a solicita și procesa acest cod.
Va trebui să aveți acces la un server web pentru a rula fișierul pe care urmează să-l creăm, dar acesta ar putea fi propriul dvs. server web local pe care îl utilizați pentru dezvoltare sau ar putea fi serverul site-ului sau blogului dvs. este găzduit pe. Într-o pagină nouă din editorul dvs. de text adăugați următorul cod:
Salvați acest lucru ca tagcloud.php. Pentru acest exemplu, presupun că aveți MySql instalat și configurat și că aveți o bază de date numită tagcloud. În această bază de date, presupun, de asemenea, că există o tabelă numită etichete. Acest tabel va conține rânduri de etichete și frecvența aparițiilor acestor etichete. Vreau să subliniez că acesta nu este cod la nivel de producție, deoarece securitatea nu a fost un factor în proiectarea sa; avem nevoie undeva pentru a obține răspunsul nostru AJAX din acest exemplu și acest cod ne va da undeva.
Să aruncăm o scurtă privire la ceea ce am făcut.
// informații despre conexiune $ host = "localhost"; $ user = "root"; $ password = "your_password_here"; $ baza de date = "tagcloud";
Mai întâi configuram informațiile despre conexiune de care avem nevoie pentru a ne conecta la baza de date. Asigurați-vă că înlocuiți dvs._password_de cu parola reală setată pentru a accesa MySql. Apoi, conectăm la baza de date și setăm interogarea pe care o vom folosi pentru a accesa datele din tabelul de etichete.
// start json obiect $ json = "(tags: ["; // rezultate prin buclă și retur pentru ($ x = 0; $ x < mysql_num_rows($query); $x++) $row = mysql_fetch_assoc($query); //continue json object $json .= "tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'";
Apoi vom crea șirul care va porni obiectul JSON, înainte de a intra în buclă prin fiecare rând din tabel și efectuând interogarea. Continuăm să construim șirul JSON în buclă for, adăugând datele din ambele câmpuri ale rândului curent ca proprietăți și valori.
// adăugați virgulă dacă nu ultimul rând, închideți paranteze dacă este ($ x < mysql_num_rows($query) -1) $json .= ","; else $json .= "])";
Realizăm o simplă verificare a fiecărei iterații a buclă, folosind condiția pentru a vedea dacă citim ultimul rând din tabel; dacă nu suntem, folosim o virgulă pentru a separa fiecare obiect, dacă închidem obiectul. Formatul obiectului JSON va fi un obiect de înregistrare individual într-o singură matrice de containere, într-un obiect exterior.
// returnați JSON cu GET pentru apel invers JSONP $ response = $ _GET ["callback"]. JSON $; răspunsul echo $; // închide conexiunea mysql_close ($ server);
Apoi repetăm răspunsul clientului folosind o solicitare GET; acest lucru este necesar pentru a face uz de callback-ul jsonp în pagina noastră principală. Trebuie să specificăm numele parametrului URL care urmează adresa URL a codului JavaScript, care în acest exemplu este pur și simplu apel invers. Nu putem spune însă numele funcției pe care vrem să o transmitem, deoarece funcția este anonimă. jQuery va gestiona acest lucru pentru noi și va asigura că datele sunt transmise funcției corecte.
Odată ce terminăm, închidem conexiunea. În această etapă, tot nu putem vedea nimic pe pagină, dar dacă rulați rularea dintr-un director de difuzare a conținutului de pe serverul dvs. web și utilizați fila NET a Firebug, puteți vedea că datele care sunt returnate pagina:
Acum că avem niște JSON cu care să lucrăm, să ne întoarcem la pagina HTML și să facem ceva cu ea. Sarcina noastră principală este să o procesăm pentru a extrage datele; în tagcloud.html, eliminați comentariul pe care l-am lăsat în cadrul apelului de apel și adăugați următorul cod:
Accentsconagua
// creați o listă pentru linkurile tag-ului $ ("
