10 data JSON dengan plugin jQuery, skrip & tuts

Kunci Takeaways

Jawatan ini memperkenalkan 10 data JSON dengan plugin jQuery, skrip & tuts, menyediakan cara untuk membuat elemen web dinamik seperti carta bar dengan kesan animasi seperti kilat, widget web, atau antara muka grid seperti mozek untuk imej.
Pos juga menawarkan seksyen FAQ yang komprehensif yang menjawab pertanyaan umum mengenai data JSON dan jQuery, termasuk cara menghuraikan data JSON, menggunakan penonton JSON, mengendalikan kesilapan ketika menghuraikan, dan membuat permintaan AJAX.
Ia menyediakan pelbagai contoh dan demonstrasi untuk setiap plugin, skrip, dan tutorial, bersama -sama dengan sumber untuk penjelajahan dan pembelajaran selanjutnya.
Jawatan hari ini adalah koleksi 10 data JSON dengan plugin jQuery, skrip & tuts. Ketahui cara membuat carta bar berkelas dengan kilat seperti kesan animasi dengan DDCHART (JSON Driven Zoomable Drill Down Bar Carta) dan banyak lagi ... Nikmati!

Catatan yang berkaitan:

alat penonton pohon json online
10 alat json dalam talian

1. Muatkan data JSON dengan JQuery, PHP dan MySQL

Jawatan ini menunjukkan cara mengisi kotak pilih berdasarkan nilai yang lain, dengan mendapatkan data JSON dengan jQuery dari skrip PHP yang mendapat data dari pangkalan data MySQL.

Demo sumber 2. JQuery Json Ajax Permintaan dan Caching

jawatan ini melihat penyemak imbas yang cache permintaan, dan bagaimana untuk memastikan ia tidak di -cache.

Demo sumber 3. Doublesuggest

Plugin JQuery akan menyediakan UI yang mencadangkan hasil semasa anda menaip. Ia akan memaparkan dua jenis cadangan, pertama (dan lebih cepat) data tempatan dan kedua (dan lebih perlahan) hasil dari pertanyaan carian Ajax.

Sumber Demo 4. DDChart: JSON Driven Zoomable Drill Down Bar Chart

adalah plugin carta bar yang didorong data JSON yang mencipta carta bar berkelas dengan kilat seperti kesan animasi.

Demo sumber 5. Cara Membina Widget Web Menggunakan JQuery

Titik menarik akan: > Pastikan kod widget tidak secara tidak sengaja merosakkan halaman lain, > Muatkan fail CSS dan JavaScript luaran secara dinamik, > Bypass Polisi Single Origin Browsers menggunakan JSONP.

Sumber Demo 6. JQuery TokenInput

plugin jQuery yang membolehkan pengguna anda memilih pelbagai item dari senarai yang telah ditetapkan, menggunakan penyelesaian auto ketika mereka menaip untuk mencari setiap item.

Demo sumber

7. JQuery Quickie

tatal tanpa had menggunakan jQuery. Saya telah menggunakan API Twitter untuk membuat contoh, jadi anda akan belajar sedikit tentang JSON juga ...

Sumber Demo

8. JQuery ChartoTable Plugin

Ia menggunakan beberapa php gd untuk menukar watak ke imej, dan kemudian ke objek JSON yang mengandungi matriks glyph.

Sumber Demo

9. Flexbox - JQuery Ajax berasaskan TextBox & Selectbox

Plugin jQuery yang bertujuan untuk menjadi pengganti yang sangat fleksibel untuk kotak teks dan dropdown HTML, menggunakan AJAX untuk mengambil dan mengikat data JSON.

Sumber Demo 10. JQuery secara rawak berputar galeri imej - Mosaiqy

Mosaiqy adalah plugin jQuery untuk menyampaikan imej dalam antara muka grid seperti mozek. Ia mengambil imej dari sumber data JSON/JSONP yang membuat pengintegrasian dengan perkhidmatan hosting imej cukup mudah dan sudah ada demo untuk Flickr, Instagram dan Panoramio.

Demo sumber Soalan Lazim (Soalan Lazim) Mengenai Data JSON dan JQuery

Bagaimana saya boleh menggunakan jQuery untuk menghuraikan data json?

JQuery menyediakan kaedah yang dipanggil $ .parsejson () yang digunakan untuk menghuraikan rentetan json. Kaedah ini mengambil rentetan JSON yang dibentuk dengan baik dan mengembalikan objek JavaScript yang dihasilkan. Rentetan JSON perlu menjadi teks yang ditulis dalam format JSON. Inilah contoh:

var json = '{"name": "John", "umur": 30, "City": "New York"}';
var obj = $ .parsejson ( json);

Dalam contoh ini, obj adalah objek JavaScript yang boleh anda akses seperti ini: obj.name, obj.age, obj.city.

Apakah penonton JSON dan mengapa saya memerlukannya? Ia amat berguna apabila berurusan dengan sejumlah besar data, kerana ia dapat membantu anda memahami struktur dan kandungan data dengan lebih mudah. Penonton JSON sering menyediakan ciri -ciri seperti penonjolan sintaks, pokok yang boleh dilipat, dan fungsi carian, menjadikannya lebih mudah untuk menavigasi dan menganalisis data.

Bagaimana saya boleh menggunakan plugin penonton JQuery JSON? Untuk menggunakannya, anda perlu memasukkan Perpustakaan JQuery dan fail JavaScript dan CSS plugin dalam fail HTML anda. Kemudian, anda boleh menggunakan fungsi JSONViewer () untuk memaparkan data JSON anda. Berikut adalah contoh:

var json = {"name": "John", "umur": 30, "City": "New York"};
$ ('#json-container'). Dengan ID JSON-CONTAINER.

Apakah alternatif untuk jQuery untuk melihat data JSON? Beberapa yang popular termasuk JSONVIEW, pelanjutan penyemak imbas yang membolehkan anda melihat data JSON secara langsung dalam penyemak imbas anda; Postman, alat untuk pembangunan API yang termasuk penonton JSON terbina dalam; dan alat dalam talian seperti jsonlint dan jsonformatter.

Bagaimana saya boleh mengendalikan kesilapan apabila parsing data JSON dengan jQuery?

Apabila parsing data JSON dengan jQuery, ralat boleh berlaku jika rentetan json tidak baik- terbentuk. Anda boleh mengendalikan kesilapan ini dengan menggunakan blok percubaan. Berikut adalah contoh:

cuba {

var obj = $ .parsejson (json);

} tangkapan (e) {

console.error ("ralat parsing:", e);

}

Dalam contoh ini, jika ralat berlaku semasa parsing, ia akan ditangkap dan log masuk ke konsol.

Bolehkah saya menggunakan jQuery untuk membuat permintaan Ajax dan mengendalikan data JSON? (). Kaedah ini boleh mengendalikan data JSON dengan menetapkan pilihan datatype kepada "JSON". Inilah contoh:

$. data) { console.log (data); }
});
var json = {"name": "John", "umur": 30, "City": "New York"};
var formattedjson = json.stringify (json, null, 2); console.log (formattedjson);

Dalam contoh ini, kaedah json.stringify () digunakan dengan argumen ketiga yang ditetapkan ke 2, yang bermaksud bahawa ia akan menggunakan 2 ruang untuk lekukan.

Bagaimana saya boleh menapis data JSON dengan jQuery?

Anda boleh menapis data JSON dengan jQuery dengan menggunakan fungsi $ .grep (). Fungsi ini mengambil array dan fungsi sebagai argumen, dan mengembalikan array baru yang hanya mengandungi unsur -unsur yang mana fungsi itu kembali benar. Berikut adalah contoh:

var data = [ {"name": "John", "Age": 30, "City": "New York"},
{"name": "Jane", "Umur": 25, "City": "Chicago"},
{"Name": "Bob", "Umur": 35, "City": "Los Angeles "}
];
var filteredData = $ .grep (data, fungsi (item) {
item kembali.age> 30; }); , fungsi $ .grep () digunakan untuk menapis array data dan mengembalikan hanya item di mana umur lebih besar daripada 30.

Bolehkah saya menggunakan jQuery untuk menukar objek JavaScript Untuk rentetan json?

Ya, anda boleh menggunakan kaedah JSON.Stringify () dalam JavaScript untuk menukar objek JavaScript ke rentetan JSON. Inilah contoh:

var obj = {"name": "John", "umur": 30, "City": "New York"};

var json = json.stringify (obj) ;

Dalam contoh ini, kaedah json.stringify () digunakan untuk menukar objek OBJ ke rentetan json.

Bagaimana saya boleh mengesahkan JSON Data?
Data JSON boleh disahkan menggunakan pelbagai alat dan perpustakaan. Satu alat dalam talian yang popular ialah JSONLINT, yang membolehkan anda menampal data JSON anda dan menyemaknya untuk kesilapan. Dalam JavaScript, anda boleh menggunakan blok cubaan dengan kaedah JSON.Parse () untuk memeriksa sama ada rentetan JSON dibentuk dengan baik. Berikut adalah contoh:

cuba {

json.parse (json);

console.log ("valid json");

} tangkapan (e) {
console.log ("Tidak sah json"); }

Dalam contoh ini, jika kaedah json.parse () melemparkan ralat, ini bermakna rentetan json tidak dibentuk dengan baik.

Atas ialah kandungan terperinci 10 data JSON dengan plugin jQuery, skrip & tuts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!