Bagaimana untuk Menghentikan Butang Borang daripada Menyegarkan Halaman?

Mencegah Muat Semula Halaman dengan Butang Borang

Apabila membuat borang dengan butang, adalah perkara biasa untuk menghadapi isu di mana klik butang mencetuskan muat semula halaman yang tidak diingini. Ini boleh menimbulkan masalah, terutamanya jika halaman mengandungi data yang dimuatkan secara dinamik yang ditetapkan semula apabila dimuat semula.

Penerangan Isu

Dalam coretan kod yang disediakan:

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Mengklik butang memanggil fungsi getData(), tetapi ia turut menyegarkan halaman secara automatik. Ini berlaku kerana jenis lalai untuk butang dalam borang ialah "serahkan," yang memulakan penyerahan borang dan memuatkan semula halaman.

Penyelesaian

Untuk mengelakkan muat semula halaman , ubah suai atribut jenis butang kepada "butang" seperti ini:

<button name="data" type="button" onclick="getData()">Click</button>

Dengan menetapkan type="button", butang no lebih lama memulakan penyerahan borang. Sebaliknya, ia berkelakuan seperti butang biasa yang semata-mata mencetuskan acara onclick yang ditentukan tanpa menjejaskan halaman.

Penjelasan

Atribut jenis mentakrifkan jenis butang. Nilai yang mungkin adalah:

• serahkan: Serahkan borang. Ini ialah nilai lalai.
• set semula: Menetapkan semula borang kepada keadaan asalnya.
• butang: Bertindak sebagai butang tersuai tanpa menyerahkan atau menetapkan semula borang.

Dengan menetapkan type="button", anda dengan berkesan menukar butang menjadi butang tidak menyerahkan yang hanya mencetuskan fungsi JavaScript yang diingini tanpa menyebabkan penyegaran halaman.

Atas ialah kandungan terperinci Bagaimana untuk Menghentikan Butang Borang daripada Menyegarkan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!