Bagaimana untuk membuat klik hantar kotak teks tidak jelas dalam php

Apabila kami mengisi borang pada antara muka PHP dan klik "Serah", borang itu biasanya dikosongkan supaya kami boleh mengisi data borang baharu. Kadangkala, kami berharap data dalam kotak teks borang tidak akan dikosongkan selepas mengklik butang hantar. Dalam artikel ini, kami akan meneroka bagaimana untuk menyelesaikan tugas ini.

Dalam HTML, kita boleh menggunakan elemen borang untuk mencipta borang, seperti kotak teks, butang radio, kotak berbilang pilihan, dsb. Apabila kita mengklik butang hantar, data borang akan dihantar ke bahagian pelayan untuk diproses. PHP boleh memproses data borang ini dengan mudah dan mengembalikan hasilnya kepada pengguna.

Walau bagaimanapun, jika kami mahu kotak teks borang tidak dikosongkan, kami perlu menggunakan beberapa kod JavaScript pada butang hantar. Khususnya, kita perlu menggunakan kaedah preventDefault() JavaScript untuk menghalang tingkah laku lalai daripada berlaku, dan kemudian gunakan AJAX untuk menghantar data borang ke bahagian pelayan untuk diproses.

Untuk menunjukkan cara melaksanakan proses ini, kami akan mencipta borang PHP mudah yang mengandungi kotak teks dan butang hantar. Apabila pengguna mengklik butang hantar, data dalam kotak teks borang akan kekal pada halaman.

Pertama, kita perlu mencipta borang HTML dengan kotak teks dan butang hantar:

<form id="myForm" method="post">
    <input type="text" name="myInput" id="myInput">
    <button type="submit" id="myButton">提交</button>
</form>

Sila ambil perhatian bahawa kami menggunakan ID pada butang hantar, ini adalah untuk kemudahan. Kod JavaScript di belakang digunakan.

Seterusnya, kita perlu menulis beberapa kod JavaScript untuk mengendalikan acara penyerahan borang. Khususnya, kami akan menggunakan jQuery untuk mengendalikan permintaan AJAX, dan kaedah preventDefault() untuk menghalang penyerahan borang dan mengekalkan data dalam kotak teks borang.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

// 阻止默认的表单提交事件
$('#myForm').submit(function(event) {
    event.preventDefault();
    
    // 获取表单数据
    var formData = {
        'myInput': $('input[name=myInput]').val()
    };
    
    // 发送 AJAX 请求
    $.ajax({
        type: 'POST',
        url: 'processForm.php', // 处理表单数据的 php 文件
        data: formData
    })
    .done(function(response) {
        // 请求成功处理 
        console.log(response);
    })
    .fail(function(error) {
        // 请求失败处理
        console.error(error);
    });
});

</script>

Dalam kod ini, kami menggunakan fungsi $() untuk mendapatkan elemen borang dan menambah pendengar acara serah. Sekiranya berlaku, kami menggunakan kaedah preventDefault() untuk menghalang peristiwa penyerahan borang lalai. Seterusnya, kami menggunakan kaedah $().val() untuk mendapatkan data borang dan menyimpannya dalam objek formData. Akhir sekali, kami menggunakan kaedah $.ajax() untuk menghantar data borang ke pelayan untuk diproses.

Sila gantikan URL dan nama fail PHP dalam kod di atas mengikut keperluan anda sendiri.

Akhir sekali, kita perlu memastikan bahawa data dalam kotak teks borang tidak akan dikosongkan selepas halaman dimuat semula. Kita boleh menggunakan sessionStorage atau localStorage untuk menyimpan nilai dalam kotak teks dan memulihkannya daripada storan apabila halaman dimuatkan.

<script>

// 存储表单数据
$(document).ready(function() {
    var myInputValue = sessionStorage.getItem('my-input-value');
    $('input[name=myInput]').val(myInputValue);
});

// 存储表单数据并在提交时更新
$('#myForm').submit(function(event) {
    var myInputValue = $('input[name=myInput]').val();
    sessionStorage.setItem('my-input-value', myInputValue);
});

</script>

Dalam kod di atas, kami menggunakan kaedah sessionStorage.getItem() untuk mendapatkan nilai kotak input borang apabila dokumen dimuatkan dan menggunakan kaedah $().val() untuk tetapkan nilai dalam kotak teks. Semasa penyerahan borang, kami menggunakan kaedah $().val() untuk mendapatkan nilai dalam kotak teks dan menggunakan kaedah sessionStorage.setItem() untuk menyimpannya dalam sessionStorage.

Dengan cara ini, kami telah menyelesaikan proses untuk tidak mengosongkan kotak teks borang. Apabila pengguna mengisi borang dan mengklik butang hantar, data borang akan dihantar ke bahagian pelayan untuk diproses, dan nilai dalam kotak teks akan disimpan dalam sessionStorage untuk kegunaan lain kali.

Atas ialah kandungan terperinci Bagaimana untuk membuat klik hantar kotak teks tidak jelas dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!