简体中文(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
525
<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学习者快速成长！