Input Array Borang Proses Cecair: Pengesahan Inventori Masa Nyata dan Kawalan Penyerahan Berdasarkan PHP dan JavaScript

Tutorial ini menerangkan secara terperinci bagaimana untuk bekerjasama dengan JavaScript untuk mencapai pengesahan masa nyata data jenis array dalam bentuk. Sebagai tindak balas kepada pelbagai keperluan inventori produk yang dikemukakan oleh pengguna, artikel itu menerangkan cara membandingkan dengan inventori pangkalan data, dan segera menamatkan proses apabila mana -mana oversell ditemui dan memberikan petunjuk untuk mengelakkan penyerahan bentuk yang tidak perlu. Kandungan meliputi permintaan AJAX front-end, pemprosesan dan tindak balas data back-end, serta reka bentuk pengalaman pengguna yang elegan.

Dalam pembangunan web, ia adalah keperluan umum untuk memproses data borang yang mengandungi pelbagai input yang serupa (seperti senarai produk, bil bahan). Senario biasa adalah apabila pengguna mengemukakan borang yang mengandungi pelbagai bahan dan kuantiti mereka, dan sistem perlu mengesahkan sama ada bilangan permintaan bagi setiap bahan melebihi inventori sedia ada dalam pangkalan data sebelum diserahkan. Jika kuantiti yang diminta dari mana -mana bahan melebihi inventori, proses penyerahan harus terganggu dengan segera dan mesej ralat yang jelas harus dipaparkan kepada pengguna.

1. Analisis Masalah: Cabaran Interrupt Logik dalam Gelung PHP

Kod PHP yang asal cuba mengesahkan gelung data array di sebelah pelayan dan meminta melalui tetingkap pop timbul apabila mendapati bahawa inventori tidak mencukupi. Walau bagaimanapun, amalan ini mempunyai masalah berikut:

1. Output langsung dari JavaScript Alert pada sisi pelayan: Kod PHP dilaksanakan di sisi pelayan, dan output langsung Alert (...) akan menyebabkan penyemak imbas melaksanakan skrip ini setelah menerima keseluruhan respons. Sekiranya amaran dicetuskan beberapa kali dalam gelung, pengguna akan melihat beberapa tingkap pop timbul, yang mempunyai pengalaman yang buruk.
2. Gelung tidak boleh terganggu dengan berkesan: Di dalam gelung PHP, walaupun amaran adalah output, gelung itu sendiri tidak berhenti dengan segera. Ini bermakna bahawa walaupun item bahan pertama berada dalam stok, kod PHP akan terus memeriksa bahan -bahan berikutnya dan boleh mengeluarkan lebih banyak amaran atau "mengemukakan borang" maklumat, yang bertentangan dengan logik perniagaan "detasmen jika ada item yang didapati tidak konsisten".
3. Kawalan Penyerahan Borang: Kod asal echo "Hantar borang"; Di cawangan lain, tetapi ini tidak benar -benar mengawal tingkah laku penyerahan borang. Penyerahan sebenar borang biasanya berlaku selepas skrip PHP dilaksanakan dan respons dihantar kembali ke pelayar, atau dicetuskan oleh JavaScript front-end.

Untuk mencapai "penamatan jika sebarang ketidakkonsistenan dijumpai" dan penyerahan borang kawalan, amalan terbaik adalah untuk menggabungkan klien (JavaScript) dan pelayan (PHP) untuk pengesahan kolaboratif.

2. Penyelesaian: Ajax Pengesahan Asynchronous dan Kawalan Front-End

Penyelesaian yang disyorkan adalah menggunakan AJAX (JavaScript Asynchronous dan XML) untuk memulakan permintaan asynchronous pada klien dan menghantar data borang ke pelayan untuk pengesahan. Skrip PHP sisi pelayan bertanggungjawab untuk melakukan pemeriksaan logik perniagaan yang ketat dan hasil pengesahan yang kembali dengan data berstruktur (seperti JSON). JavaScript pelanggan memutuskan sama ada untuk memaparkan ralat, penyerahan blok, atau membenarkan borang untuk meneruskan penyerahan berdasarkan hasil yang dikembalikan.

1. Logik Pelanggan (JavaScript)

JavaScript pelanggan bertanggungjawab untuk memintas peristiwa penyerahan bentuk, mengumpul data, menghantarnya ke pelayan melalui AJAX, dan memproses hasil berdasarkan respons pelayan.

• Penyerahan Borang Intercept: Gunakan Event.PreventDefault () untuk menyekat tingkah laku penyerahan segerak lalai borang.
• Kumpulkan Data: Kumpulkan data array dan medan lain yang berkaitan dalam bentuk.
• Hantar permintaan AJAX: Gunakan API API atau XMLHTTPREQUEST untuk menghantar data ke antara muka pengesahan PHP.
• Respons Pelayan Pemprosesan: Menghidupkan respons JSON, memaparkan mesej ralat dan menghalang penyerahan borang jika terdapat ralat; Jika pengesahan berlalu, biarkan borang untuk meneruskan penyerahan (contohnya, mencetuskan penyerahan sebenar melalui form.submit ()).

Contoh kod JavaScript:

 document.addeventListener ('domContentLoaded', function () {
    const form = document.QuerySelector ('form'); // Andaikan bahawa hanya ada satu bentuk, atau jika (bentuk) dipilih oleh id {
        form.AddEventListener ('submit', fungsi async (event) {
            event.PreventDefault (); // Mencegah penyerahan borang secara lalai const formData = FormData baru (bentuk);
            const bahan = formData.getall ('material_added_id []'); // Perhatikan nama medan array const materisuedWeights = formData.getAll ('material_isseud_weight []'); // Perhatikan nama medan array // mengatur data array ke dalam format yang sesuai untuk dihantar, seperti JSON
            const datatosend = {
                bahan_ids: bahan,
                material_issued_weights: materialisedweights,
                // medan borang lain, jika anda memerlukan btn_action: formdata.get ('btn_action') // Katakan terdapat medan tindakan butang};

            Cuba {
                Const Response = menunggu ambil ('validate_materials.php', {// point ke kaedah skrip pengesahan php anda: 'pos',
                    tajuk: {
                        'Jenis kandungan': 'aplikasi/json' // memberitahu pelayan bahawa ia menghantar json
                    },
                    Badan: json.stringify (datAtOsend)
                });

                const result = menunggu tindak balas.json (); // parse json respons jika (result.status === 'error') {
                    Alert (result.message); // Mesej ralat paparan // ia boleh dioptimumkan lagi, seperti menonjolkan kotak input untuk ralat tertentu} lain {
                    // Pengesahan berjaya, penyerahan bentuk sebenar boleh dilakukan // Nota: Berikut adalah bentuk yang diserahkan untuk memastikan bahawa pelayan mempunyai logik untuk memproses borang penyerahan sebenar.submit (); 
                    // atau, jika penyerahan sebenar juga melalui Ajax, bina di sini dan hantar satu lagi permintaan Ajax // console.log ('Semua bahan dipenuhi dengan baik dan bentuk boleh dikemukakan.');
                }
            } menangkap (ralat) {
                Console.error ('Permintaan pengesahan gagal:', ralat);
                amaran ('Ralat rangkaian atau pelayan, sila cuba sebentar lagi.');
            }
        });
    }
});

// Katakan struktur borang html anda adalah seperti berikut, perhatikan atribut nama medan array/*

Bahan A

Bahan b hantar

*/

2. Logik Pengesahan Server (PHP)

Skrip PHP sisi pelayan (seperti validate_materials.php) menerima permintaan AJAX, melakukan pertanyaan pangkalan data dan pengesahan logik perniagaan. Kuncinya ialah: Sebaik sahaja item yang tidak memenuhi kriteria dijumpai, hentikan gelung dengan segera dan kembalikan mesej ralat.

• Terima data JSON: Gunakan file_get_contents ("php: // input") untuk mendapatkan data pos asal dan menghuraikannya dengan json_decode.
• Pengesahan Gelung: Keluarkan atas pelbagai bahan yang diterima.
• Keluar dan tindak balas awal: Jika anda mendapati bahawa inventori tidak mencukupi, tetapkan status ralat dan mesej dengan segera, dan kembalikan respons JSON melalui JSON_ENCODE, dan kemudian menamatkan pelaksanaan skrip menggunakan keluar;
• Tanggapan Kejayaan: Jika semua item lulus pengesahan, kembalikan status yang berjaya.

Contoh kod PHP (validate_materials.php):

  Php
// Dengan mengandaikan sambungan pangkalan data ditubuhkan // termasuk 'db_connection.php'; 
$ conn = new pdo ("mysql: host = localHost; dbName = your_db", "username", "kata laluan"); // Gantikan dengan maklumat sambungan pangkalan data anda $ conn-> setAttribute (pdo :: attr_errmode, pdo :: errmode_exception);

// Tetapkan tajuk respons ke JSON
header ('Kandungan-jenis: Aplikasi/JSON');

// Dapatkan data pos asal dan parse json
$ input = file_get_contents ('php: // input');
$ data = json_decode ($ input, true); // Benar bermaksud Dekodkan sebagai array bersekutu // Periksa sama ada data itu sah jika (! isset ($ data ['material_ids']) ||! isset ($ data ['material_issued_weights']) ||! is_array ($ data_ids ']
    echo json_encode (['status' => 'ralat', 'mesej' => 'data permintaan tidak sah.']);
    keluar;
}

$ material_ids = $ data ['material_ids'];
$ material_issued_weights = $ data ['material_issued_weights'];

// pastikan panjang kedua -dua tatasusunan konsisten jika (kiraan ($ material_ids)! == count ($ material_issued_weights)) {
    echo json_encode (['status' => 'ralat', 'mesej' => 'id bahan tidak sepadan dengan jumlah berat yang dipancarkan.']);
    keluar;
}

untuk ($ i = 0; $ i <count material_ids i material_id="(int)" cast ke integer untuk mengelakkan suntikan sql dikeluarkan_weight="(float)" material_issued_weights nombor titik terapung mendapatkan inventori bahan dari pangkalan data qry="pilih material_weight, material_added_name dari material_added_tb di mana material_added_id =: material_id" pernyataan="$" conn-> prepare ($ qry);
    $ pernyataan-> bindParam (': material_id', $ material_id, pdo :: param_int);
    $ pernyataan-> melaksanakan ();
    $ result = $ statement-> fetch (pdo :: fetch_assoc);

    jika (! $ hasil) {
        // jika id bahan tidak wujud echo json_encode (['status' => 'error', 'message' => "id material: {$ materion_id} tidak wujud."]);
        keluar; // menamatkan segera}

    $ tersedia_weight = (float) $ hasil ['material_weight'];
    $ material_name = $ result ['material_added_name'];

    // Bandingkan bilangan permintaan pengguna ke inventori jika ($ dikeluarkan_weight> $ tersedia_weight) {
        echo json_encode (['status' => 'error', 'message' => $ materion_name. "Inventori yang tidak mencukupi, inventori semasa:".
        keluar; // Jika anda mendapati bahawa inventori tidak mencukupi, tamatkan skrip dengan segera dan kembalikan ralat}
}

// Jika gelung itu selesai, ini bermakna semua bahan berada dalam stok echo json_encode (['status' => 'kejayaan', 'mesej' => 'semua bahan berada dalam stok.']);
?></count>

3. Perkara yang perlu diperhatikan dan pengoptimuman

1. Keselamatan:

   • Suntikan SQL: Dalam kod PHP, pastikan anda menggunakan penyataan yang disediakan (penyataan yang disediakan) dan pengikatan parameter (bindParam atau bindValue) untuk mengelakkan suntikan SQL, terutamanya apabila memproses input pengguna. Kod sampel telah mengadopsi pernyataan pra -proses PDO.
   • Penukaran Jenis Data: Penukaran dan Pengesahan Jenis Ketat dan Input Pengguna yang Diterima (seperti material_id dan dikeluarkan_weight) untuk memastikan bahawa mereka memenuhi jenis data yang diharapkan (seperti intval () atau jenis penukaran (int)).
   • Pengesahan sisi pelayan adalah sangat diperlukan: walaupun bahagian depan melakukan pengesahan, pelayan mesti melakukan pengesahan sekali lagi, kerana pengesahan klien dapat dilangkau.

2. Pengalaman Pengguna:

   • Arahan Memuatkan: Semasa menghantar permintaan AJAX, penunjuk pemuatan (seperti "Pengesahan ...") boleh dipaparkan untuk mengelakkan pengguna daripada mengklik berulang kali atau berfikir bahawa halaman itu terjebak.
   • Konkrit mesej ralat: Selain amaran, mesej ralat boleh dipaparkan di sebelah borang, atau menyerlahkan kotak input tertentu yang menyebabkan ralat memberikan maklum balas yang lebih mesra.
   • Kejayaan/kegagalan separa: Untuk senario yang lebih kompleks, jika komitmen separa dibenarkan, struktur tindak balas JSON yang lebih kompleks diperlukan untuk menunjukkan item yang berjaya dan yang gagal.

3. Struktur Kod dan Pengekalkan:

   • Menggabungkan operasi pangkalan data ke dalam kelas atau fungsi yang berasingan untuk meningkatkan kebolehgunaan semula kod dan kebolehpercayaan.
   • Modularize kod JavaScript front-end untuk mengelakkan pencemaran pembolehubah global.

4. Borang sebenarnya diserahkan:

   • Selepas pengesahan Ajax berjaya, penyerahan sebenar borang itu dicetuskan melalui form.submit (). Ini bermakna skrip yang ditunjuk oleh harta tindakan utama anda (seperti Your_submission_script.php) akan menerima data borang lengkap dan memprosesnya.
   • Satu lagi cara ialah jika penyerahan bentuk sebenar juga dilakukan melalui Ajax, maka selepas pengesahan berjaya, satu lagi permintaan Ajax dimulakan untuk memproses logik penyimpanan data.

Meringkaskan

Dengan memisahkan logik pengesahan input array borang ke dalam kerja kolaborasi klien JavaScript dan PHP sisi pelayan, kami dapat mencapai proses pengesahan data yang lebih efisien dan mesra pengguna. Pelanggan bertanggungjawab untuk maklum balas segera dan permintaan tak segerak, sementara pelayan difokuskan pada integriti data checksum yang ketat logik perniagaan. Corak ini memastikan bahawa pemprosesan susulan dapat ditamatkan dengan segera dan maklum balas yang jelas diberikan kepada pengguna apabila sebarang data yang tidak memenuhi kriteria ditemui, dengan itu mengoptimumkan pengalaman penyerahan bentuk dan penggunaan sumber sistem.

Atas ialah kandungan terperinci Input Array Borang Proses Cecair: Pengesahan Inventori Masa Nyata dan Kawalan Penyerahan Berdasarkan PHP dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!