Bagaimana untuk menanyakan data dengan jQuery dan memaparkannya pada halaman

Semasa proses pembangunan bahagian hadapan, kami sering menghadapi senario di mana kami perlu mendapatkan dan memaparkan data. Biasanya, kami perlu memulangkan data melalui antara muka bahagian belakang, dan kemudian memaparkan data ke halaman melalui rangka kerja bahagian hadapan atau kod JS asli.

Antaranya, jQuery ialah salah satu rangka kerja yang biasa digunakan dalam pembangunan bahagian hadapan Ia merangkumi banyak kaedah operasi yang mudah dan boleh memudahkan kerja pembangunan bahagian hadapan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menanyakan data dan memaparkannya pada halaman.

1. Data pertanyaan jQuery

1. Permintaan Ajax

Di bahagian hadapan, gunakan Ajax untuk mendapatkan data secara tidak segerak dari latar belakang. Melalui jQuery, kami boleh melaksanakan permintaan Ajax dengan mudah. Contohnya:

$.ajax({
    url: "/api/data",
    method: "GET",
    data: {
        id: 123
    },
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

Dalam kod di atas, kami melakukan permintaan GET untuk mendapatkan data dengan id 123 daripada alamat /api/data. Selepas berjaya mendapatkan data, kami mencetak data pada konsol.

2. Permintaan JSONP

Dalam situasi merentas domain, kami tidak boleh terus menggunakan Ajax untuk meminta data. Pada masa ini, anda boleh menggunakan teknologi JSONP (JSON with Padding) untuk mendapatkan data. Fail JS diperkenalkan melalui tag skrip Kandungan fail JS ialah panggilan ke fungsi, dan data dikembalikan sebagai parameter fungsi. Contohnya:

$.ajax({
    url: "http://example.com/data?callback=parseData",
    dataType: "jsonp",
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

function parseData(data) {
    console.log(data);
}

Kod di atas menghalakan url ke alamat 'http://example.com/data' dan menentukan fungsi panggil balik melalui parameter panggil balik. Pada masa yang sama, parameter dataType ditentukan sebagai 'jsonp', supaya jQuery akan menukar permintaan kepada JSONP. Akhir sekali, apabila mengembalikan hasil, kami memanggil fungsi parseData, menghantar data sebagai parameter.

2. jQuery memaparkan data

Selepas mendapatkan data, kami perlu memaparkannya pada halaman. Di sini, kami memperkenalkan dua kaedah pemaparan biasa.

1. innerHTML

innerHTML ialah atribut yang disediakan oleh JS asli yang boleh mendapatkan atau menetapkan kandungan HTML elemen tertentu. Kita boleh menggunakan jQuery untuk mendapatkan elemen yang perlu memberikan data, dan kemudian menggunakan innerHTML untuk menjadikan data ke dalam elemen. Contohnya:

Andaikan terdapat elemen <div> pada halaman, kami menggunakan jQuery untuk mendapatkan elemen dan menjadikan data kepada elemen.

<div id="content"></div>

var data = "<p>这是一段数据</p>";

$("#content").html(data);

2. Enjin templat

Enjin templat ialah teknologi yang menggabungkan data dengan templat untuk memaparkan data ke halaman. Enjin templat biasa termasuk Misai, Bar Hendal, dsb. Selain JS asli, kami juga boleh menggunakan kaedah $.tmpl yang disediakan oleh jQuery untuk melaksanakan pemaparan templat. Contohnya:

Andaikan terdapat elemen <ul> pada halaman, kita perlu mendapatkan tatasusunan dari latar belakang, tatasusunan mengandungi beberapa objek, setiap objek mengandungi atribut id dan nama. Kita boleh menggunakan kod berikut untuk memaparkan data ke halaman.

<ul id="list">
</ul>

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <li>
        <span class="id">${id}</span>
        <span class="name">${name}</span>
    </li>
</script>

var data = [
    { id: 1, name: "数据1" },
    { id: 2, name: "数据2" },
    { id: 3, name: "数据3" }
];

$("#list").html($("#itemTmpl").tmpl(data));

Dalam kod di atas, kami mula-mula mentakrifkan teg <script> dan menentukannya sebagai templat jenis teks/x-jquery-tmpl melalui atribut jenis. Gunakan ${} dalam templat untuk merujuk atribut data Id dan nama di sini sepadan dengan atribut id dan nama dalam objek data. Akhir sekali, kami memberikan data kepada templat melalui $("#itemTmpl").tmpl(data) dan memberikan hasil ke halaman melalui $("#list").html().

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk menanyakan data dan memaparkannya pada halaman. Antaranya, data latar belakang boleh diperolehi melalui Ajax dan JSONP, dan innerHTML dan enjin templat boleh memaparkan data ke halaman. Melalui teknologi ini, kami boleh menjalankan pembangunan bahagian hadapan dengan lebih mudah dan meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci Bagaimana untuk menanyakan data dengan jQuery dan memaparkannya pada halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!