Buat lencana laman web anda sendiri dengan jQuery dan json

Perkhidmatan seperti Flickr, Delicious, dan Twitter semuanya menawarkan lencana JavaScript atau widget yang boleh anda tambahkan ke laman web anda. Tetapi jika anda sudah menggunakan kerangka JavaScript di laman web anda, seperti jQuery, mengapa anda mahu menambah lebih banyak JavaScript? Selain itu, lebih menyeronokkan untuk membuat anda sendiri. Semua perkhidmatan ini juga menawarkan API suapan format JSON, dan melancarkan widget anda sendiri adalah mudah. Berikut adalah satu yang saya cambuk dalam masa yang singkat untuk Twitter menggunakan jQuery. Anda akan terkejut betapa sedikit kod yang diperlukan.

Apa yang anda perlukan untuk menggunakan API JSON Twitter adalah URL:

http://twitter.com/status/user_timeline/sitePointdotcom.json?count=5&callback=YourFunction

Ganti SitePointDotcom dengan mana -mana nama pengguna Twitter, tukar nombor Count = 5 kepada bilangan tweet yang anda ingin ambil dan berfungsi dengan nama fungsi panggilan balik anda, dan anda sudah bersedia untuk pergi. Salin URL itu ke dalam medan alamat penyemak imbas anda dan anda akan dapat memuat turun data JSON untuk melihat:

Output adalah panggilan ke fungsi JavaScript anda. Arahan yang mengandungi koleksi objek JSON - satu untuk setiap tweet - diluluskan sebagai hujah tunggal. Ideanya ialah anda menambah elemen skrip ke laman web anda dengan URL di atas sebagai sumber. Ini adalah perlu untuk memintas sekatan keselamatan Ajax yang terdapat di kebanyakan pelayar di mana JavaScript tidak dapat membuat panggilan Ajax ke domain selain daripada yang sekarang. Ia agak baik, bagaimanapun, untuk memasukkan fail sumber JavaScript dari domain lain; Ini adalah cara standard jenis lencana yang berfungsi.

yourfunction([ ... ]);

Walau bagaimanapun, kami akan menggunakan pendekatan lain, kerana menambah tag skrip lain dan memastikan terdapat fungsi panggilan balik yang tidak menyenangkan bagi saya. Kami akan menggunakan fungsi Getjson yang sangat berguna dalam jQuery. Pertama sekali, kami memerlukan beberapa HTML untuk meletakkan data widget:

Ideanya ialah semua kemas kini Twitter akan menjadi slot ke dalam elemen Div sebagai elemen perenggan yang berasingan. Bagus dan sederhana. Saya juga menyukainya kerana jika JavaScript gagal berjalan atas sebab tertentu, terdapat kandungan yang bermakna yang tersisa di halaman dan bukannya, katakan, animasi pemuatan yang tidak pernah selesai.

<div >
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

Oleh itu, saya mahu skrip ini dipecat sebaik sahaja halaman siap, dan cara terbaik untuk melakukannya dalam jQuery adalah menggunakan $ (dokumen). Ready:

Semua keperluan kaedah getJson adalah URL. Apa yang baik mengenai fungsi ini ialah jika anda menambah Parameter Parameter Parameter Kuasan =? hingga akhir URL, jQuery akan menjaga fungsi panggilan balik untuk anda:

$(document).ready(function(){
  //our code goes here...
});

JQuery akan lulus data JSON ke fungsi yang dinyatakan dalam hujah kedua sebagai pemboleh ubah data. Kami kemudian boleh menggunakan setiap kaedah untuk gelung melalui semua tweet dan memasukkannya ke dalam HTML halaman kami:

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

yourfunction([ ... ]);

Jika anda pergi dan menyemak demo, anda akan melihat kami kini mempunyai widget yang menarik dalam data Twitter, menukar setiap tweet ke perenggan HTML dan memasukkannya ke HTML halaman kami. Kami juga menambah nilai kelas ganjil atau bahkan ke tweet supaya kami dapat melaksanakan warna latar belakang dalam CSS. Setakat ini begitu baik, tetapi apa yang hilang? Baik saya fikir mana -mana lencana Twitter mesti sekurang -kurangnya menghubungkan @replies, hashtags, dan URL; Dan menambah beberapa ungkapan biasa JavaScript akan melakukan pekerjaan itu untuk kami dengan baik:

<div >
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

Itu sahaja! Pergi dan lihat produk siap. Betapa mudahnya itu?

Pendekatan yang sama boleh diambil dengan Delicious, Flickr, Last.fm, dan juga Yahoo Pipes. Terdapat banyak ruang untuk penambahbaikan juga; Anda boleh menambah maklumat masa, pautan ke URL tweet, tambah avatar, dan sebagainya. Raena, editor teknikal lain SitePoint, mencadangkan agar anda dapat menggabungkan data dari semua perkhidmatan tersebut bersama-sama dalam susunan kronologi untuk membuat paparan gaya hidup. Sekiranya anda pergi membuat sendiri, tinggalkan komen dan beritahu saya.

Atas ialah kandungan terperinci Buat lencana laman web anda sendiri dengan jQuery dan json. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!