Petua pantas: Manfaatkan kuasa jQuery untuk mengekstrak data daripada fail XML

Dalam petua ringkas ini, saya akan menunjukkan kepada anda cara memuatkan data daripada fail XML ke halaman kosong. Kami akan menggunakan fungsi $.get dan melaksanakan pemuatan gif apabila mendapatkan semula maklumat. Kami akan membentangkan senarai ringkas buku pembangunan web yang disyorkan. Jom mulakan.

Langkah 1: Semak skrip

Mula-mula, mari kita lihat fail XML yang mudah. Ia hanya mengandungi beberapa buku dengan tajuk, imej dan penerangannya.

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
    info goes here.
    </description>
    </book>
</books>

Seterusnya, mari kita lihat jQuery dalam tindakan.

    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1 id="Recommended-Web-Development-Books"> Recommended Web Development Books </h1>');
        $('body').append('<dl />');

        $(d).find('book').each(function(){

            var $book = $(this); 
            var title = $book.attr("title");
            var description = $book.find('description').text();
            var imageurl = $book.attr('imageurl');

            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Petua pantas: Manfaatkan kuasa jQuery untuk mengekstrak data daripada fail XML" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});

Langkah 2: Jelaskan masa

Oleh kerana ini adalah petua cepat, saya akan menjalankan skrip lebih cepat daripada biasa. Apabila dokumen sedia untuk manipulasi, kami akan mendapatkan fail XML menggunakan fungsi "$.get". Dalam kurungan kami akan menghantar lokasi fail dan kemudian menjalankan fungsi panggil balik. Saya akan menggunakan pembolehubah "d" untuk mewakili maklumat yang diekstrak daripada fail XML. Seterusnya, kami akan mencipta teg tajuk dan senarai definisi.

Meneruskan, kami akan mencari fail XML (d) dan mencari teg bertajuk "buku". Melihat kembali fail saya, terdapat tiga buah buku kesemuanya. Oleh itu, kita perlu menjalankan kaedah "setiap" untuk melaksanakan operasi pada setiap buku. Ingat, "setiap" adalah seperti pernyataan "untuk". Ini ialah satu cara untuk mengulangi setiap elemen dalam set yang dibungkus.

Dalam blok kod seterusnya, saya mentakrifkan beberapa pembolehubah. Untuk mendapatkan "tajuk" dan "perihalan" daripada fail XML, kami menggunakan ".attr(value)" - dengan "value" adalah sama dengan atribut di dalam teg.

Akhir sekali, kami mencipta pembolehubah yang dipanggil "html" yang akan mengandungi html yang memaparkan maklumat daripada fail XML. Walau bagaimanapun, hanya memberikan maklumat itu kepada pembolehubah tidak akan memaparkannya pada halaman. Untuk menambahkannya pada halaman, kami mendapat senarai definisi dan menambahkan pembolehubah. - $('dl').append($(html));

Satu lagi perkara yang patut disebut ialah apabila mendapatkan maklumat daripada fail XML kami akan memaparkan gif pemuatan standard (melalui imej latar belakang). Sebaik sahaja data dimuatkan, kami akan mengambil imej dan memadamkannya.

Anda sudah selesai

Saya tahu saya telah melalui ini dengan cepat, jadi sila berasa bebas untuk mengulas dan bertanya apa-apa soalan yang anda ada. Perlu diingatkan bahawa skrip ini memerlukan lebih banyak kerja sebelum ia bersedia untuk tapak web dunia sebenar. Anda perlu memberi pampasan kepada mereka yang telah mematikan Javascript. Dalam kes ini, jika mereka mematikannya, mereka akan menatap halaman kosong. Anda perlu membayar pampasan untuk perkara-perkara ini. Tetapi, saya menyimpang.

Atas ialah kandungan terperinci Petua pantas: Manfaatkan kuasa jQuery untuk mengekstrak data daripada fail XML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!