简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
重寫後的標題為：使用PHP按鈕結合jQuery和POST方法來取得回傳值
P粉738821035
P粉738821035 2023-09-05 08:42:27
0
2
481
<p>我有一個簡單的表單來取得使用者名，並希望實現以下目標：</p> <ul> <li>當使用者點擊按鈕時，按鈕將被停用以防止多次點擊（在實際情況下可能需要幾秒鐘來處理所有數據，例如呼叫API、寫入資料庫等）；</li> <li>點擊後，需要發生新的POST請求，以便在PHP中捕獲$_POST['username']並進一步處理請求。 </li> </ul> <p>如何達成這個目標？ </p> <p>程式碼如下，但不按預期工作：</p> <pre class="brush:php;toolbar:false;"><?php session_start(); // 當表單提交時處理表單數據 if ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST['submit-button'])) { $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="submit" id="submit-button" name="submit" 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){ document.getElementById("submit-button").disabled = true; document.getElementById("submit-button").value="Processing, please wait..."; document.getElementById("your_form_id").submit(); }); </script> </body> </html></pre></p>
P粉738821035
P粉738821035

全部回覆(2)
P粉615829742
P粉6158297422023-09-06 00:44:03 2樓

您正在使用JQuery函式庫，但是您正在使用原生JavaScript指令來處理按鈕和submit()。要嘛您全部使用Pure JS，要嘛全部使用JQuery。
下面的程式碼僅使用JQuery。此外，我用一個按鈕替換了submit。
。 最後，按鈕不會以POST方式傳遞，所以如果您需要進行測試，請在輸入欄位上進行。

下面是一個包含我剛剛提到的元素的程式碼，應該可以幫助您。

# 
<?
// 当表单提交时处理表单数据
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>
點贊 +0
新增回覆
P粉364642019
P粉3646420192023-09-06 00:31:19 1樓

為了實現這一點，可以使用以下原則：

  • test-a.php（普通的HTML表單，包含了jQuery和AJAX，用於停用提交按鈕和顯示簡單的「頁面載入器」）;
  • test-b.php（用於處理資料的PHP檔）;
  • test-c.php（用於顯示回應）。

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>

test-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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！