Interaksi Data Dinamik PHP: Mengoptimumkan Operasi Penyerahan dan Pangkalan Data Borang melalui AJAX

1. Refresh Page: Setiap penyerahan akan menyebabkan seluruh halaman memuat semula dan mengganggu pengalaman pengguna.
2. Kerumitan: Jika setiap baris mempunyai bentuk bebas, ia akan menyebabkan kelebihan dalam struktur DOM; Jika semua operasi berkongsi borang, logik kompleks diperlukan untuk membezakan baris mana yang dikendalikan.
3. Tidak Lancar: Refresh halaman yang kerap akan mengurangkan kecekapan kerja apabila pengguna melakukan pelbagai operasi.

Ajax untuk pemprosesan data tak segerak

Untuk mengatasi batasan penyerahan bentuk tradisional, pembangunan web moden umumnya mengamalkan teknologi JavaScript dan XML (AJAX) yang tidak segerak. AJAX membolehkan pelanggan menukar data dengan pelayan tanpa memuatkan semula keseluruhan halaman. Ini memberikan pengguna pengalaman interaktif yang lebih lancar dan lebih cepat.

Ajax mempunyai kelebihan yang sangat jelas dalam mengendalikan senario penerimaan/penolakan untuk data senarai:

• Halaman tetap tidak berubah selepas pengguna mengklik butang.
• Hanya data yang diperlukan dihantar ke pelayan.
• Selepas pelayan memprosesnya, hasilnya (seperti kejayaan, kegagalan, dan data yang dikemas kini) boleh dikembalikan kepada klien, dan klien kemudian mengemas kini halaman mengikut hasilnya.

Melaksanakan pemprosesan permintaan AJAX: bahagian depan

Kami akan menggunakan contoh untuk menunjukkan cara mengendalikan permintaan penerimaan/penolakan dalam jadual menggunakan AJAX.

1. Struktur HTML dan sifat data

Pertama, kita perlu menyediakan maklumat yang diperlukan untuk setiap baris data dan butang operasinya apabila PHP menjana HTML. Titik utama ialah:

• Keluarkan tag : Oleh kerana kami akan menggunakan JavaScript untuk menghantar permintaan, tag HTML
  tradisional tidak lagi diperlukan.
• ID Line: Tetapkan Request_ID ke atribut ID elemen untuk memudahkan pengambilalihan JavaScript.
• Atribut Jenis Data: Gunakan atribut data HTML5 (seperti data-jenis = 'menerima' atau data-jenis = 'deny') untuk menandakan jenis operasi butang.

Berikut adalah kod sampel untuk PHP untuk menjana baris jadual:

  php untuk ($ j = 0; $ j <count permintaan j :>
    <tr id="'<?" php echo permintaan j request_id>' class = "table-row">
         Php 
            // Tetapkan teks mengikut jenis permintaan jika ($ permintaan [$ j] ['request_type'] == '1') {
                $ request_type = 'calon';
            } else {
                $ request_type = 'pengundi';
            } 
        ?>
        <td class="School">  = $ request_type?> </td>
        <td class="name">  = $ requests [$ j] ['first_name']?> </td>
        <td class="calon">  = $ requests [$ j] ['last_name']?> </td>
        <td> 
            <butang data-jenis="'menerima'" name="acceptreq" value="req_accepted" type="button" class="btn btn-success"> menerima </butang> 
        </td>
        <td> 
            <butang data-jenis="'deny'" name="denyreq" value="req_denied" type="button" class="btn btn-danger"> deny  
        </butang>
</td>
    </tr>
 php endfor; ?></count>

Nota: Jenis sifat butang hendaklah ditetapkan ke butang untuk mengelakkan tingkah laku komitmen lalainya.

2. Logik pemprosesan JavaScript

Seterusnya, kami menggunakan JavaScript untuk mendengar acara klik butang dan menghantar permintaan AJAX. Di sini kita menggunakan API Fetch Moden.

 <script>
    // Buat objek FormData untuk membina badan permintaan pos LET FD = FormData baru ();

    // pilih semua butang dengan name = "acceptreq" atau name = "DenyReq" document.QuerySelectorAll (&#39;Button [name = "acceptreq"], butang [name = "denyreq"]). Foreach (bttn => {
        bttn.addeventListener (&#39;klik&#39;, fungsi (e) {
            // BLOCK Tingkah laku lalai butang (ini akan menghalang penyerahan borang jika jenis bukan butang)
            E.PreventDefault (); 

            // Dapatkan elemen induk <tr> butang yang diklik sekarang biarkan tr = this.parentNode.closest (&#39;tr&#39;);

            // Dapatkan request_id dari atribut id <tr>
            fd.set (&#39;id&#39;, tr.id.trim ()); // gunakan trim () untuk membersihkan ruang yang mungkin // dapatkan jenis operasi fd.set (&#39;jenis&#39;, this.dataset.type);

            // Hantar permintaan pos menggunakan Fetch API Fetch (&#39;../ Aset/PHP/Accept-requests.inc.php&#39;, { 
                Kaedah: &#39;pos&#39;, 
                Badan: fd // Gunakan objek FormData sebagai badan permintaan})
            .THEN (r => {
                jika (! r.ok) {// Periksa kod status respons HTTP membuang ralat baru (`HTTP ERROR! Status: $ {r.status}`);
                }
                kembali r.text (); // menghuraikan respons sebagai teks})
            .talu (teks => {
                // Makluman fungsi panggilan balik (teks); // Mesej yang dikembalikan oleh pelayan muncul // todo: Di sini, kemas kini DOM mengikut respons pelayan, seperti mengeluarkan garis // tr.remove ();
            })
            .catch (e => {
                // Menangkap kesilapan dalam permintaan atau konsol pemprosesan respons.error (&#39;Permintaan gagal:&#39;, e);
                Alert (&#39;Operasi gagal, sila cuba lagi.&#39;);
            });
        });
    });
</script>

Kod JavaScript Penjelasan terperinci:

• FormData (): digunakan untuk membina badan permintaan dalam bentuk pasangan nilai utama, yang sangat sesuai untuk menghantar data borang.
• Document.QuerySelectorAll (): Pilih semua Butang Terima dan Tolak pada halaman.
• foreach () dan addEventListener (): Tambah pendengar acara klik untuk setiap butang.
• E.PreventDefault (): Blok kelakuan lalai butang dan memastikan permintaan itu dihantar oleh kawalan JavaScript.
• this.parentNode.closest ('tr'): Ini menunjukkan butang yang diklik sekarang. ParentNode mendapat elemen induknya , terdekat ('tr') melihat ke atas ke elemen nenek moyang yang terdekat, sehingga mendapat baris yang mengandungi request_id.
• tr.id.trim (): Mendapatkan nilai atribut ID dan menggunakan trim () untuk menghapuskan aksara ruang putih yang mungkin.
• this.dataset.type: Mendapat nilai atribut jenis data pada butang.
• Ambil (): Hantar permintaan HTTP.
  • Kaedah: 'Pos': Tentukan kaedah permintaan untuk diposkan.
  • Badan: FD: Hantar objek FormData sebagai badan permintaan.
• .THEN (): Sambutan yang berjaya untuk memproses permintaan mengambil. Yang pertama .Then () memeriksa status HTTP, dan yang kedua .THEN () mengendalikan kandungan badan tindak balas.
• .Catch (): Menangkap kesilapan rangkaian yang mungkin berlaku semasa proses permintaan atau kesilapan lain dalam rantaian janji.
• Kemas kini DOM (TODO): Dalam aplikasi sebenar, selepas berjaya memproses permintaan, anda biasanya menulis kod di sini untuk mengemas kini UI, seperti mengeluarkan baris yang diterima/ditolak dari jadual, atau mengemas kini paparan status baris.

Melaksanakan Pemprosesan Permintaan AJAX: Bahagian PHP Backend (terima-requests.inc.php)

Di sisi pelayan (contohnya, ..

  Php
// Pastikan untuk memproses hanya permintaan pos jika ($ _server ['request_method'] === 'pos') {
    // Dapatkan data yang dihantar oleh hujung depan $ requestId = $ _post ['id'] ?? null;
    $ ActionType = $ _post ['type'] ?? null;

    // Sahkan data jika ($ requestId === null || $ actionType === null) {
        http_response_code (400); // permintaan yang tidak baik
        echo "Ralat: ID permintaan yang hilang atau jenis operasi.";
        keluar ();
    }

    // Sambungan pangkalan data (sila gantikannya dengan kod sambungan pangkalan data sebenar anda)
    $ serverName = "localhost";
    $ username = "Nama Pengguna";
    $ password = "kata laluan";
    $ dbname = "your_database";

    Cuba {
        $ conn = new pdo ("mysql: host = $ serverName; dbName = $ dbName", $ username, $ password);
        $ conn-> setAttribute (pdo :: attr_errmode, pdo :: errmode_exception);

        $ responseMessage = "";

        suis ($ ActionType) {
            kes 'terima':
                // melaksanakan logik penerimaan, seperti mengemas kini status atau memadam permintaan $ stmt = $ conn-> predied ("Padam dari permintaan di mana request_id =: id");
                $ stmt-> bindParam (': id', $ requestId, pdo :: param_int);
                $ stmt-> Execute ();
                $ responseMessage = "Request {$ requestId} diterima dan dipadam.";
                rehat;
            kes 'menafikan':
                // melaksanakan logik penolakan, seperti mengemaskini status atau memadam permintaan $ stmt = $ conn-> Sediakan ("Padam dari permintaan di mana request_id =: id");
                $ stmt-> bindParam (': id', $ requestId, pdo :: param_int);
                $ stmt-> Execute ();
                $ responseMessage = "Request {$ RequestId} telah ditolak dan dipadam.";
                rehat;
            Lalai:
                http_response_code (400); // permintaan yang tidak baik
                echo "Ralat: Jenis operasi tidak sah.";
                keluar ();
        }

        echo $ responseMessage; // Kembalikan mesej kejayaan ke bahagian depan} tangkapan (pdoException $ e) {
        http_response_code (500); // ralat pelayan dalaman
        echo "Operasi pangkalan data gagal:". $ e-> getMessage ();
    } akhirnya {
        $ conn = null; // Tutup sambungan pangkalan data}

} else {
    http_response_code (405); // Kaedah tidak dibenarkan
    echo "Hanya permintaan pos dibenarkan.";
}
?>

Penjelasan terperinci mengenai kod PHP:

• $ _Server ['request_method']: Pastikan hanya permintaan pos yang boleh memasuki logik pemprosesan.
• $ _Post ['id'] dan $ _post ['type']: PHP akan menghuraikan data secara automatik yang dihantar oleh FormData dan mengaksesnya melalui pembolehubah hyperglobal $ _post.
• Pengesahan Data: Sebelum memproses data, pastikan untuk mengesahkan bahawa request_id dan tindakantype wujud dan berkesan, yang merupakan keperluan asas untuk keselamatan dan keteguhan.
• Operasi pangkalan data: Gunakan PDO untuk sambungan dan operasi pangkalan data. Adalah disyorkan untuk menggunakan penyataan pra -proses (menyediakan dan bindParam) untuk mencegah serangan suntikan SQL.
• Pernyataan Tukar: Melaksanakan logik perniagaan yang berbeza (terima atau menolak) berdasarkan nilai ActionType.
• Respons: Kembalikan hasil pemprosesan (seperti mesej kejayaan atau mesej ralat) ke hujung depan melalui Echo.
• Kod Status HTTP: Menetapkan kod status HTTP yang sesuai (seperti 200 OK, 400 permintaan buruk, 500 ralat pelayan dalaman, kaedah 405 tidak dibenarkan) membantu bahagian depan lebih baik memahami respons pelayan.

Pengindahan Gaya (CSS)

Untuk memberikan maklum balas visual yang lebih baik, beberapa gaya CSS boleh ditambah, seperti kesan tetikus.

 *{
  Peralihan: kemudahan semua 100ms;
  Font-Family: Monospace
}
th {
  Latar Belakang: RGBA (50,50,100,0.5);
  Warna: Putih;
}
tr {
  margin: 0.25rem;
}
tr: hover td {
  Latar Belakang: RGBA (0,200,0,0.25);
}
TD,
th {
  margin: 0.25rem;
  Sempadan: 1px Dotted RGBA (0,0,0,0.3);
  Padding: 0.45rem
}
butang: hover {
  kursor: penunjuk;
}
[data-jenis = 'menerima']: hover {
  Latar Belakang: Lime
}
[data-jenis = 'deny']: hover {
  Latar Belakang: Merah;
  Warna: Putih;
}

Ringkasan dan amalan terbaik

Melalui tutorial ini, kami belajar bagaimana menggunakan teknologi Ajax, terutamanya API Fetch, untuk mengoptimumkan interaksi data dinamik dalam aplikasi web. Kaedah ini bukan sahaja meningkatkan pengalaman pengguna, tetapi juga menjadikan pemisahan logik antara front-end dan back-end lebih jelas.

Kajian Mata Utama:

• Elakkan menetapkan secara manual $ _post: $ _post secara automatik dihuni apabila pelayan menyelesaikan permintaan.
• * Gunakan `data- ` atribut: ** Simpan data kecil yang berkaitan dengan unsur-unsur dalam html, yang mudah untuk JavaScript untuk mendapatkan.
• Ajax (Fetch API): Melaksanakan permintaan tak segerak untuk mengelakkan penyegaran halaman.
• Objek FormData: Mudah membina badan permintaan pos.
• Pemprosesan PHP Backend: Terima data $ _POST, lakukan operasi pangkalan data, dan kembalikan respons.
• Keselamatan: Sentiasa sahkan dan tapis semua input pengguna, menggunakan pernyataan pra -proses untuk mengelakkan suntikan SQL.
• Maklum Balas Pengguna: Menyediakan arahan pemuatan semasa permintaan AJAX, dan memberi maklum balas yang jelas selepas permintaan berjaya atau gagal (seperti arahan mesej, kemas kini DOM).

Dengan mengikuti prinsip-prinsip ini, anda boleh membina aplikasi web yang lebih cekap dan mesra pengguna.