cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk yang ditulis semula ialah: Menggunakan butang PHP digabungkan dengan kaedah jQuery dan POST untuk mendapatkan nilai pulangan

<p>Saya mempunyai borang mudah untuk mendapatkan nama pengguna dan ingin mencapai perkara berikut: </p> <ul> <li>Apabila pengguna mengklik butang, butang akan dilumpuhkan untuk menghalang berbilang klik (dalam kes sebenar, ia mungkin mengambil masa beberapa saat untuk memproses semua data, seperti memanggil API, menulis ke pangkalan data, dsb.); </li> <li>Selepas klik, permintaan POST baharu perlu berlaku untuk menangkap $_POST['nama pengguna'] dalam PHP dan memproses permintaan itu dengan lebih lanjut. </li> </ul> <p>Bagaimana untuk mencapai matlamat ini? </p> <p>Kod adalah seperti berikut, tetapi ia tidak berfungsi seperti yang diharapkan: </p> <pre class="brush:php;toolbar:false;"><?php session_start(); // Memproses data borang apabila borang diserahkan jika ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST['butang-serah'])) { $uname=$_POST['nama pengguna']; header('Lokasi: success.php'); } } ?> <!DOCTYPE html> <html> <kepala> <title>Borang Saya</title> </head> <badan> <form id="your_form_id"tindakan="test4.php" <p><label>Nama Pengguna</label> <input id="nama pengguna"jenis="teks"nilai="" <jenis input="serahkan"id="butang-serah" </form> <skrip src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <jenis skrip="teks/javascript"> $("#submit-button").on("klik", fungsi(e){ document.getElementById("butang serah").dilumpuhkan = benar; document.getElementById("submit-button").value="Memproses, sila tunggu..."; document.getElementById("your_form_id").submit(); }); </skrip> </badan> </html></pre></p>
P粉738821035P粉738821035435 hari yang lalu528

membalas semua(2)saya akan balas

  • P粉615829742

    P粉6158297422023-09-06 00:44:03

    Anda menggunakan perpustakaan JQuery, tetapi anda menggunakan arahan JavaScript asli untuk mengendalikan butang dan menyerahkan(). Sama ada anda menggunakan semua JS Tulen, atau anda menggunakan semua JQuery.
    Kod di bawah hanya menggunakan JQuery. Selain itu, saya menggantikan hantar dengan butang.
    . Akhirnya, butang tidak DIPOS, jadi jika anda perlu menguji, lakukannya pada medan input.

    Di bawah ialah kod dengan elemen yang saya nyatakan yang sepatutnya membantu anda. 

    <?
// 当表单提交时处理表单数据
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    if(isset($_POST['username']))
    {
        $uname=$_POST['username'];
        header('Location: success.php');
    }
}
?>

<!DOCTYPE html>
<html>
  <head>
    <title>My Form</title>
  </head>
<body>

<form id="your_form_id" action="test4.php" method="post">
     <p><label>Username</label>
     <input id="username" type="text" name="username" value=""  autofocus/></p>
     <input type="button" id="submit-button" name="submit-button" value="Login" />
</form>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $("#submit-button").on("click", function(e){
            $('#submit-button').prop('disabled',true);
            $('#submit-button').val('Processing, please wait...');
            $('#your_form_id').submit();
    });
</script>

</body>
</html>

    balas
    0
  • P粉364642019

    P粉3646420192023-09-06 00:31:19

    Untuk mencapai ini, prinsip berikut boleh digunakan:

    • test-a.php (borang HTML biasa, termasuk jQuery dan AJAX, digunakan untuk melumpuhkan butang hantar dan memaparkan "pemuat halaman" yang mudah
    • test-b.php (fail PHP digunakan untuk memproses data);
    • test-c.php (untuk memaparkan respons).

    test-a.php:

    <!DOCTYPE html>
<html>
<head>
    <title>Ajax example with Page loader</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /*CSS for Page loader*/
        #loader {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(e) {
                e.preventDefault(); // 阻止元素的默认操作
                $('#submitButton').prop('disabled', true); // 禁用id为submitButton的按钮
                $('#loader').show(); // 显示“页面加载器”

                // 发送AJAX请求
                $.ajax({
                    url: 'test-b.php', //处理PHP文件的路径
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        // 将响应保存到会话变量中
                        sessionStorage.setItem('response', response);
                        // 转到“test-c.php”
                        window.location.href = 'test-c.php';
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm" method="POST">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required><br>

        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required><br>

        <input type="submit" id="submitButton" value="Submit">
    </form>

    <div id="loader">
        This is page loader, please wait...
    </div>
</body>
</html>

    ujian-b.php:

    <?php
session_start();

$name = $_POST['name'];
$email = $_POST['email'];

// 在这里可以使用$name和$email进行进一步处理或保存到数据库

// 打印响应数据的示例
$response = "The following data has been received:<br>";
$response .= "Name: " . $name . "<br>";
$response .= "Email: " . $email . "<br>";

// 将响应保存到会话变量中
$_SESSION['response'] = $response;

// 完成本文件的工作
exit;
?>

    test-c.php:

    <!DOCTYPE html>
<html>
<head>
    <title>Success</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Process file response:</h1>
    <?php
    session_start();

    if (isset($_SESSION['response'])) {
        $response = $_SESSION['response'];
        echo $response;
        unset($_SESSION['response']); // 取消设置会话变量
    } else {
        echo "No data to show.";
    }
    ?>
</body>
</html>

    balas
    0
  • Batalbalas