Selesaikan masalah pengasingan data menu drop-down Ajax Linkage dalam jadual dinamik

Tutorial ini membincangkan secara terperinci bagaimana untuk mengawal pengisian data menu drop-down dengan tepat dalam jadual HTML yang dihasilkan secara dinamik. Apabila jadual mengandungi pelbagai baris dengan struktur yang sama dan setiap baris mempunyai menu drop-down hubungan bebas, pemilih global tradisional menyebabkan semua menu drop-down yang berkaitan dikemas kini secara serentak. Artikel ini akan menggunakan teknik Dom Traversal, seperti kaedah terdekat () dan mencari (), untuk menunjukkan cara untuk mengisi data respons AJAX dengan tepat ke dalam menu lungsur yang sepadan dengan baris semasa peristiwa pencetus untuk memastikan pengasingan data dan pengalaman pengguna.

Latar belakang dan cabaran masalah

Dalam pembangunan web, kita sering menghadapi senario di mana baris jadual perlu dijana secara dinamik, dan setiap baris mengandungi satu set menu drop-down yang dipautkan. Sebagai contoh, dalam antara muka kemasukan pesanan, pengguna boleh menambah beberapa baris produk, setiap baris mengandungi dua kategori produk "dan" Nama Produk ". Apabila memilih "Kategori Produk", menu drop-down "Nama Produk" harus memuatkan senarai produk yang sepadan mengikut kategori yang dipilih.

Pendekatan tradisional adalah untuk mengikat peristiwa perubahan ke menu drop-down "Klasifikasi Komoditi", dan memulakan permintaan AJAX dalam fungsi pengendalian acara untuk mendapatkan data subkategori yang sepadan. Walau bagaimanapun, jika semua "kategori produk" dan "nama produk" menu drop-down menggunakan nama kelas CSS yang sama (contohnya, kategori-dropdown dan sub-kategori-dropdown), maka apabila menu drop-down "kategori produk" dipilih, jika ia akan digunakan. Halaman yang mempunyai kelas subkategori-dropdown untuk dikemas kini, bukan hanya yang sepadan dengan baris semasa.

Ini bukan sahaja menyebabkan kekeliruan data, tetapi juga serius mempengaruhi pengalaman pengguna. Lebih mencabar ialah apabila baris meja boleh ditambah atau dipadam secara dinamik, kami tidak dapat memberikan ID unik kepada setiap menu lungsur untuk membezakannya. Oleh itu, kita memerlukan cara untuk mencari dan mengendalikan unsur -unsur tertentu dalam baris semasa apabila peristiwa itu dicetuskan.

Penyelesaian: Kedudukan elemen yang tepat berdasarkan Dom Traversal

Kunci untuk menyelesaikan masalah ini ialah dalam panggilan balik Ajax yang berjaya, elemen sasaran tidak lagi digunakan untuk menggunakan pemilih global untuk mencari elemen sasaran, tetapi sebaliknya menggunakan kaedah DOM Traversal untuk bermula dari elemen yang mencetuskan peristiwa (iaitu. baris.

Berikut adalah langkah pelaksanaan khusus dan contoh kod:

Struktur HTML asal (versi mudah)

Katakan kami mempunyai struktur jadual HTML berikut, yang mengandungi pelbagai baris, masing-masing dengan kategori yang sama dan menu drop-down subkategori:

Kod JavaScript asal (ada masalah)

Berikut adalah kod JavaScript asal yang menyebabkan semua subkategori dikemas kini secara serentak:

 <script>
    $ (dokumen) .ready (fungsi () {
        $ (&#39;. Kategori-Dropdown&#39;). (&#39;perubahan&#39;, fungsi () {
            var kategori_id = this.value;
            $ .ajax ({
                URL: "Fetch-Subcategory-by-category.php",
                Taip: "Pos",
                Data: {
                    kategori_id: kategori_id
                },
                Cache: Salah,
                Kejayaan: Fungsi (hasil) {
                    // Masalahnya terletak: pemilih global, yang akan mempengaruhi semua.
                    $ (". Subkategori-Dropdown"). HTML (hasil);
                }
            });
        });
    });
</script>

Dalam kod di atas, $ (". Subkategori-Dropdown"). HTML (hasil); adalah punca masalah. Tidak kira kategori-dropdown yang mencetuskan acara perubahan, ia memilih semua elemen dalam dokumen dengan kelas subkategori-dropdown dan mengemas kini kandungan mereka.

Kod JavaScript yang diperbetulkan

Untuk menyelesaikan masalah ini, kita perlu mengehadkan skop elemen sasaran ke baris semasa dalam panggilan balik Ajax yang berjaya. Kami boleh menggunakan kaedah terdekat JQuery () untuk mencari elemen

yang paling dekat, dan kemudian gunakan kaedah Cari () untuk mencari subkategori yang sama-dropdown di dalam .

 <script>
    $ (dokumen) .ready (fungsi () {
        // Gunakan perwakilan acara untuk memastikan baris ditambah secara dinamik juga sah $ (&#39;#kategori&#39;). (&#39;Perubahan&#39;, &#39;.category-dropdown&#39;, fungsi () {
            var kategori_id = this.value;
            // cache unsur -unsur peristiwa pencetus semasa supaya const $ currentCategoryDropdown = $ (ini); 

            $ .ajax ({
                URL: "Fetch-Subcategory-by-category.php",
                Taip: "Pos",
                Data: {
                    kategori_id: kategori_id
                },
                Cache: Salah,
                Kejayaan: Fungsi (hasil) {
                    // 1. Cari ibu bapa terdekat <tr> elemen ke atas // 2. Cari elemen .sub-kategori-dropdown di dalam <tr> const $ subSelect = $ currentCategoryDropdown.closest ("tr").
                    // Mengisi hasil AJAX ke menu drop-down tertentu yang dijumpai $ subSelect.html (hasil);
                },
                Ralat: Fungsi (xhr, status, ralat) {
                    // Pengendalian ralat: Sebagai contoh, cetak konsol mesej ralat.error ("Permintaan Ajax gagal:", status, ralat);
                    // atau paparkan amaran mesej ralat ("Muat subkelas gagal, sila cuba lagi.");
                }
            });
        });
    });
</script>

Parsing Kod:

1. $ ('#Kategori'). ('Perubahan', '.Category-Dropdown', fungsi () {...}); : Perwakilan acara digunakan di sini. Mengikat peristiwa perubahan ke unsur induk #Kategori jadual dan nyatakan bahawa panggilan balik hanya dicetuskan jika peristiwa itu berasal dari elemen dengan kelas. Pendekatan ini sangat berkesan untuk baris ditambah secara dinamik, kerana pendengar acara terikat kepada elemen ibu bapa tetap, dan bukannya secara langsung mengikat kepada elemen kanak -kanak yang mungkin tidak wujud.
2. const $ currentCategoryDropdown = $ (ini); : Sebelum permintaan Ajax dimulakan, bungkus elemen dropdown kategori acara yang dicetuskan sekarang ke dalam objek jQuery dan simpannya secara tetap. Ini kerana dalam fungsi panggil balik kejayaan Ajax, konteks ini akan berubah (biasanya menunjuk kepada objek permintaan AJAX), jadi rujukan kepada elemen asal perlu disimpan terlebih dahulu.
3. $ currentCategoryDropdown.closest ("TR") : Kaedah terdekat () bermula dari elemen semasa dan melintasi ke atas di sepanjang pokok Dom sehingga pemilih unsur nenek moyang pertama (di sini "TR") dijumpai. Ini memastikan bahawa kita dapati baris

di mana penurunan kategori semasa terletak.

.find (". Sub-Kategori-Dropdown") : Kaedah mencari () melihat ke bawah dalam elemen

yang terdapat di dekat ("tr") dan melihat ke bawah keturunan semua pemilih yang sepadan (di sini adalah ".Sub-kategori-dropdown"). Oleh kerana kita telah mengehadkan carian ke baris semasa, ia hanya akan mencari menu drop-down subkategori dalam baris itu.

$ subSelect.html (hasil); : Akhirnya, isi data hasil yang dikembalikan oleh permintaan AJAX ke dalam subkategori yang tepat.

Skrip sisi pelayan (Fetch-Subcategory-by-Category.php)

Fail ini bertanggungjawab untuk menanyakan data subclass yang sepadan dari pangkalan data berdasarkan kategori yang diterima dan mengembalikannya sebagai tag HTML .

  Php
// Fetch-Subcategory-by-category.php
memerlukan_once "../config.php"; // Memperkenalkan konfigurasi pangkalan data jika (isset ($ _ post ['kategori_id'])) {
    $ CATEGETY_ID = $ _POST ['CATECTIONE_ID'];

    // Data subkelas pertanyaan $ query = "pilih * dari menu_items di mana kategori_id =? Order oleh item_name asc";
    $ stmt = mysqli_prepare ($ con, $ query);
    mysqli_stmt_bind_param ($ stmt, "i", $ category_id);
    mysqli_stmt_execute ($ stmt);
    $ result = mysqli_stmt_get_result ($ stmt);

    $ output = '<option value=""> pilih item </option>'; // pilihan lalai semasa ($ row = mysqli_fetch_array ($ hasil)) {
        $ output. = '<option value="'. $ row ['item_id']. '">'. $ row ['item_name']. '</option>';
    }
    echo $ output;
    mysqli_stmt_close ($ stmt);
} else {
    echo '<option value=""> Tiada kategori dipilih </option>';
}
mysqli_close ($ con);
?>

Nota: Kod PHP di atas hanya satu contoh. Dalam projek sebenar, pastikan anda menggunakan penyata yang disediakan (penyataan yang disediakan) untuk mengelakkan serangan suntikan SQL dan melakukan pengendalian ralat yang sesuai.

Ringkasan dan amalan terbaik

Dengan menggunakan kedua-dua kaedah jQuery Dom Traversal, terdekat () dan cari (), kita dapat menyelesaikan masalah pengasingan data menu drop-down Ajax dalam jadual dinamik. Idea teras kaedah ini ialah:

1. POSITIONING ELEMENT POSISI: $ (ini) menunjuk kepada elemen yang kini mencetuskan acara.
2. Melihat ke atas untuk mencari nenek moyang yang sama: terdekat ("tr") mendapati barisan meja terdekat di mana elemen pencetus terletak.
3. Melihat ke bawah ke elemen sasaran: Cari (".

Amalan Terbaik:

• Delegasi Acara: Untuk unsur -unsur yang ditambah secara dinamik, menggunakan perwakilan acara (seperti $ ('#ibu bapa') pada ('event', '.Selector', function () {...}); adalah amalan terbaik, yang memastikan bahawa peristiwa dapat ditangkap dengan baik walaupun unsur -unsur kemudian ditambah ke DOM.
• Pengendalian Ralat: Tambahkan fungsi panggil balik ralat dalam permintaan AJAX untuk memberikan maklum balas sekiranya masalah rangkaian atau ralat sisi pelayan.
• Pengalaman Pengguna: Semasa permintaan AJAX, anda boleh mempertimbangkan memaparkan penunjuk beban di sebelah menu drop-down sasaran untuk meningkatkan pengalaman pengguna.
• Pengoptimuman Prestasi: Untuk jadual yang sangat besar, operasi DOM yang kerap boleh menjejaskan prestasi. Dalam kes ini, menatal maya atau data pemuatan paging boleh dipertimbangkan.
• Modularity: Menggabungkan kod JavaScript yang relevan ke dalam fungsi atau modul untuk meningkatkan kebolehkerjaan dan kebolehgunaan semula kod.

Menguasai teknik DOM Traversal ini adalah penting untuk menangani logik interaktif komponen UI yang dihasilkan secara dinamik dan berstruktur dalam aplikasi web. Ia boleh membantu pemaju membina aplikasi yang lebih mantap dan mesra pengguna.

kategori	item
kategori pilih kategori	sub kategori
kategori pilih kategori	sub kategori

Atas ialah kandungan terperinci Selesaikan masalah pengasingan data menu drop-down Ajax Linkage dalam jadual dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!