recherche

Maison  >  Questions et réponses  >  le corps du texte

Le titre réécrit est : Utiliser des boutons PHP combinés avec les méthodes jQuery et POST pour obtenir des valeurs de retour

<p>J'ai un formulaire simple pour obtenir des noms d'utilisateur et je souhaite obtenir les résultats suivants : </p> <ul> <li>Lorsque l'utilisateur clique sur le bouton, le bouton sera désactivé pour empêcher plusieurs clics (dans des cas réels, le traitement de toutes les données peut prendre quelques secondes, comme l'appel de l'API, l'écriture dans la base de données, etc.) ; ≪/li> <li>Après le clic, une nouvelle requête POST doit être effectuée afin de capturer $_POST['username'] en PHP et de poursuivre le traitement de la requête. ≪/li> </ul> <p>Comment atteindre cet objectif ? </p> <p>Le code est le suivant, mais il ne fonctionne pas comme prévu : </p> <pre class="brush:php;toolbar:false;"><?php session_start(); // Traite les données du formulaire lorsque le formulaire est soumis if ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST['submit-button'])) { $uname=$_POST['nom d'utilisateur']; header('Emplacement : success.php'); } } ?> <!DOCTYPE html> <html> <tête> <title>Mon formulaire</title> ≪/tête> <corps> <form id="votre_form_id" action="test4.php" méthode="post"> <p><label>Nom d'utilisateur</label> <ID d'entrée="nom d'utilisateur" type="texte" nom="nom d'utilisateur" valeur="" autofocus/</p> <type d'entrée="soumettre" id="bouton de soumission" nom="soumettre" valeur="Connexion" /> </formulaire> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="texte/javascript"> $("#submit-button").on("clic", function(e){ document.getElementById("submit-button").disabled = true; document.getElementById("submit-button").value="Traitement en cours, veuillez patienter..."; document.getElementById("votre_form_id").submit(); }); </script> </corps> </html></pre></p>
P粉738821035P粉738821035485 Il y a quelques jours584

répondre à tous(2)je répondrai

  • P粉615829742

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

    Vous utilisez la bibliothèque JQuery, mais vous utilisez des commandes JavaScript natives pour gérer les boutons et soumettre(). Soit vous optez pour du Pure JS, soit pour du JQuery.
    Le code ci-dessous utilise uniquement JQuery. De plus, j'ai remplacé soumettre par un bouton.
    . Enfin, les boutons ne sont pas POSTés, donc si vous avez besoin de tester, faites-le sur le champ de saisie.

    Ci-dessous un code avec les éléments que je viens de citer et qui devrait vous aider. 

    <?
// 当表单提交时处理表单数据
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>

    répondre
    0
  • P粉364642019

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

    Pour y parvenir, les principes suivants peuvent être utilisés :

    • test-a.php (formulaire HTML simple, incluant jQuery et AJAX, utilisé pour désactiver le bouton de soumission et afficher un simple "chargeur de page"
      • ) ;
    • test-b.php (fichier PHP utilisé pour traiter les données);
    • test-c.php (pour afficher les réponses).

    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>

    répondre
    0
  • Annulerrépondre