Rahsia untuk memilih unsur -unsur yang dikembalikan dari JQuery Ajax Response Strings

Artikel ini menunjukkan cara menggunakan semula kandungan dengan cekap dalam aplikasi web dengan memanfaatkan enjin pemilihan JQuery untuk mengekstrak serpihan HTML tertentu dari halaman statik melalui panggilan AJAX. Teknik ini amat berguna apabila berurusan dengan sistem warisan atau kandungan statik di mana penyediaan data sisi pelayan tidak boleh dilaksanakan.

Konsep Utama:

Enjin pemilihan JQuery menawarkan fleksibiliti, bekerja dengan kedua-dua elemen DOM dan rentetan markup dalam memori. Apabila mengambil halaman HTML statik menggunakan AJAX, markup keseluruhan halaman (termasuk elemen HTML dan akar HTML) dikembalikan. Untuk membuat ini boleh dipilih dengan jQuery, ia perlu dibungkus dalam satu elemen akar (mis., A

). Kaedah JQuery <div> kemudian membolehkan pengekstrakan tepat serpihan HTML yang dikehendaki. <code>find()

senario:

Bayangkan aplikasi dengan filem penyenaraian halaman "Filem" dalam pelbagai kategori (Rajah 1). Walau bagaimanapun, laman utama hanya perlu memaparkan subset filem -filem ini, contohnya, hanya filem tindakan (Rajah 2).

pelaksanaan:

Halaman "Filem" (Penyenaraian 1) Kategori Filem Kumpulan Logik dalam Elemen, masing -masing dengan ID unik.

<section></section> Penyenaraian 1: halaman filem (filem.html)

Laman Utama (Penyenaraian 2) menggunakan jQuery untuk mengambil

melalui Ajax. Sambutan dibalut dengan

<h1 id="Movies">Movies</h1>

<section id="action-container">
  <h2 id="Action">Action</h2>
  <ul>
    <li>Die Hard</li>
    <li>The Matrix</li>
    <li>Raiders of the Lost Ark</li>
  </ul>
</section>

<section id="drama-container">
  <h2 id="Drama">Drama</h2>
  <ul>
    <li>A Few Good Men</li>
    <li>The Shawshank Redemption</li>
    <li>Legends of the Fall</li>
  </ul>
</section>

, dan kaedah

mengekstrak bahagian filem "tindakan". movies.html <div> <code>find() Penyenaraian 2: Laman Utama (index.html)

lembaran gaya mudah (penyenaraian 3) menyediakan gaya asas.

$(function() {
  $.get('movies.html', function(response) {
    var source = $('<div>' + response + '</div>');
    $('#movies').html(source.find('#action-container').html());
  });
});

Penyenaraian 3: Lembaran Gaya (Styles.css)

Kesimpulan:

body, html {
  padding: 4px;
  margin: 0px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

Pendekatan ini, sementara niche, membuktikan berharga apabila memilih kandungan secara selektif dari halaman sedia ada tanpa pengubahsuaian sisi pelayan. Kuncinya membungkus tindak balas AJAX dalam satu elemen akar dan menggunakan JQuery's untuk pengekstrakan kandungan yang disasarkan.

find() Soalan -soalan yang sering ditanya:

(seksyen FAQ asal dikekalkan, tetapi diubahsuai untuk kejelasan dan kesimpulan.)

JQuery AJAX Response Strings:
• Ini adalah data (sering html) dikembalikan oleh pelayan selepas permintaan AJAX. JQuery's

  mengendalikan permintaan dan pemprosesan respons.

• Memilih elemen dari respons AJAX: Gunakan $(responseString) untuk membuat objek jQuery dari respons, kemudian gunakan kaedah seperti .find() untuk memilih unsur -unsur dalam objek itu.

• respons halaman html penuh: Respons halaman HTML penuh kepada permintaan pos biasanya menunjukkan ralat sisi pelayan. Semak kod status (harus 200 untuk kejayaan) dan teks tindak balas untuk debugging.

• Mendapatkan bahagian HTML dengan jQuery: Kaedah .load() adalah cekap untuk memuatkan bahagian tertentu dokumen HTML. Gunakan pemilih selepas ruang di URL (mis., $(‘#result’).load(‘ajax/test.html #container’)).

• Menukar objek jQuery ke rentetan: Kaedah .html() menukar objek jQuery yang mewakili elemen HTML ke dalam rentetan yang mengandungi kandungan HTML mereka.