搜索

首页  >  问答  >  正文

重写后的标题为：使用PHP按钮结合jQuery和POST方法来获取返回值

<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粉738821035P粉738821035450 天前549

全部回复(2)我来回复

  • P粉615829742

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

    您正在使用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

    为了实现这一点，可以使用以下原则：

    • 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
  • 取消回复