Artikel ini bertujuan untuk menyelesaikan cara lulus data ke datatables melalui html borang untuk mencapai penapisan data dinamik. Kami akan memperkenalkan cara menggunakan jQuery untuk mendengar acara penyerahan borang dan menghantar data borang ke pelayan sebagai sebahagian daripada permintaan AJAX, akhirnya mengemas kini kandungan paparan data. Melalui artikel ini, anda akan menguasai teknologi utama pemuatan data dinamik dan penapisan dalam data.

Pelaksanaan Front-End: JQuery dan Integrasi Data

Pertama, kita perlu membuat borang yang mengandungi elemen dalam HTML dan memulakan jadual menggunakan datatables. Kuncinya ialah cara lulus nilai borang ke permintaan AJAX untuk data dan menggunakan nilai -nilai ini untuk penapisan data pada sisi pelayan.

Struktur HTML (index.php):

Kod JQuery:

Berikut adalah kod utama untuk menggunakan jQuery untuk mendengar peristiwa penyerahan borang dan memuatkan semula data AJAX dari datatables.

 $ (dokumen) .ready (fungsi () {
  var Table = $ ('#Place-table'). DataTable ({
    "Ajax": {
      URL: "json.php",
      "datasrc": "",
      "data": fungsi (d) {
        var frm_data = $ ('#frm'). SerializeArray (); // Gunakan pemilih id $ .each (frm_data, fungsi (kunci, val) {
          d [val.name] = val.value;
        });
      }
    },
    lajur: [{
      Data: 'Place_id'
    }, {
      Data: 'Place_name'
    }, {
      Data: 'total_visitor'
    }]
  });

  $ ("#frm"). hantar (fungsi (e) {// menggunakan pemilih id e.PreventDefault ();
    table.ajax.reload ();
  });
});

Penjelasan kod:

1. var Table = $ ('#Place-table'). DataTable ({...}) : Inisialisasi datatables dan tetapkan objek DataTables ke jadual pembolehubah untuk operasi berikutnya.
2. "Data": Fungsi (d) {...} : Dalam permintaan AJAX, tentukan fungsi data untuk membina data secara dinamik untuk dihantar ke pelayan. $ ('#frm'). SerializeArray () bersiri data borang ke dalam array, kemudian gelung melalui array, menambah nilai setiap medan ke parameter permintaan Ajax 'Ajax. Perhatikan bahawa anda perlu menggunakan #FRM untuk memilih borang melalui pemilih ID.
3. $ ("#frm"). Kirim (fungsi (e) {...}) : Dengarkan acara penyerahan borang. E.PreventDefault () menghalang tingkah laku penyerahan lalai borang, dan table.ajax.reload () Muat semula data AJAX dari datatables untuk mengemas kini kandungan jadual. Perhatikan bahawa anda perlu menggunakan #FRM untuk memilih borang melalui pemilih ID.

Pelaksanaan Backend: Penapisan Data PHP (JSON.PHP)

Di sisi pelayan, kita perlu menerima permintaan AJAX dari datatables dan menanyakan pangkalan data menggunakan data borang sebagai klausa WHERE.

  Php
  $ serverName = "localhost";
  $ username = "your_username";
  $ password = "your_password";
  $ dbname = "your_database";

  // Buat sambungan $ conn = mysqli baru ($ serverName, $ username, $ kata laluan, $ dbName);

  // Semak sambungan jika ($ conn-> connect_error) {
    mati ("Sambungan gagal:". $ conn-> connect_error);
  }

  $ selectedPlace = $ _post ['selectplace']; // Dapatkan nilai selectplace $ sql = "pilih * dari placestable where place_name = '$ selectedplace'"; // Gunakan pernyataan yang disediakan untuk mengelakkan suntikan sql $ result = $ conn-> query ($ sql);

  $ data = array ();
  jika ($ hasil-> num_rows> 0) {
    sementara ($ row = $ result-> fetch_assoc ()) {
      $ data [] = array (
        "Place_id" => $ row ['id'],
        "Place_name" => $ row ['Place_name'],
        "total_visitor" => $ row ['total_visitor']
      );
    }
  }

  echo json_encode ($ data);
  $ conn-> close ();
?>

Penjelasan kod:

1. $ selectedPlace = $ _post ['selectplace']; : Dapatkan nilai SelectPlace yang dihantar melalui permintaan pos.
2. * `$ sql =" Pilih dari Placestable Where Place_Name = '$ SelectedPlace' "; **: Bina pernyataan pertanyaan SQL dan gunakan nilai $ SelectedPlace sebagai syarat klausa WHERE. Penting: Untuk melindungi daripada serangan suntikan SQL, anda harus menggunakan kenyataan yang disediakan untuk membina pertanyaan SQL. Contohnya:

    $ stmt = $ conn-> Sedia ("pilih * dari placestable where place_name =?");
   $ stmt-> bind_param ("s", $ selectedPlace);
   $ stmt-> Execute ();
   $ result = $ stmt-> get_result ();

3. echo json_encode ($ data); : Kodkan hasil pertanyaan ke dalam format JSON dan hantar kembali kepada pelanggan.

Nota dan ringkasan

• Keselamatan: Sentiasa gunakan pernyataan yang disediakan untuk mencegah serangan suntikan SQL, terutamanya apabila menggunakan input pengguna yang dibekalkan untuk membina pertanyaan SQL.
• Pengendalian ralat: Tambahkan mekanisme pengendalian ralat pada sisi pelayan supaya apabila ralat berlaku, ia dapat mengendalikan dan mengembalikan maklumat ralat dengan betul kepada klien.
• Pengoptimuman Prestasi: Jika jumlah data adalah besar, pertimbangkan untuk menggunakan paging sisi pelayan untuk meningkatkan prestasi.
• Pengesahan Borang: Pengesahan borang dilakukan pada kedua -dua sisi klien dan pelayan untuk memastikan kesahan dan integriti data.
• Pemilih ID : Pastikan menggunakan pemilih ID #FRM apabila memilih borang dalam jQuery. Ini akan memilih elemen borang sasaran dengan lebih tepat.

Melalui artikel ini, anda belajar bagaimana untuk mengintegrasikan borang HTML dengan data untuk melaksanakan penapisan data dinamik. Menguasai teknologi ini akan membolehkan anda membina aplikasi web yang lebih fleksibel dan interaktif.

Atas ialah kandungan terperinci Lulus data borang untuk penapisan data dinamik menggunakan jQuery dan datatables. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!