简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Der umgeschriebene Titel lautet: PHP-Schaltflächen in Kombination mit jQuery- und POST-Methoden verwenden, um Rückgabewerte zu erhalten
P粉738821035
P粉738821035 2023-09-05 08:42:27
0
2
482
<p>Ich habe ein einfaches Formular zum Abrufen von Benutzernamen und möchte Folgendes erreichen: </p> <ul> <li>Wenn der Benutzer auf die Schaltfläche klickt, wird die Schaltfläche deaktiviert, um mehrere Klicks zu verhindern (in realen Fällen kann es einige Sekunden dauern, bis alle Daten verarbeitet sind, z. B. das Aufrufen der API, das Schreiben in die Datenbank usw.); </li> <li>Nach dem Klicken muss eine neue POST-Anfrage erfolgen, um $_POST['username'] in PHP zu erfassen und die Anfrage weiter zu verarbeiten. </li> </ul> <p>Wie erreicht man dieses Ziel? </p> <p>Der Code lautet wie folgt, funktioniert jedoch nicht wie erwartet: </p> <pre class="brush:php;toolbar:false;"><?php session_start(); // Verarbeiten Sie die Formulardaten, wenn das Formular gesendet wird if ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST['submit-button'])) { $uname=$_POST['Benutzername']; header('Standort: success.php'); } } ?> <!DOCTYPE html> <html> <Kopf> <title>Mein Formular</title> </head> <Körper> <form id="your_form_id" action="test4.php" <p><label>Benutzername</label> <input id="username" name="username" <input type="submit" id="submit-button" name="submit" </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("Senden-Schaltfläche").disabled = true; document.getElementById("submit-button").value="Verarbeitung, bitte warten..."; document.getElementById("your_form_id").submit(); }); </script> </body> </html></pre></p>
P粉738821035
P粉738821035

Antworte allen(2)
P粉615829742
P粉6158297422023-09-06 00:44:03 2 Etage

您正在使用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>
Wie +0
Antwort hinzufügen
P粉364642019
P粉3646420192023-09-06 00:31:19 1 Etage

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

  • 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！