简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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粉738821035
P粉738821035 2023-09-05 08:42:27
0
2
522
<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粉738821035
P粉738821035

répondre à tous(2)
P粉615829742
P粉6158297422023-09-06 00:44:03 2 plancher

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>
Comme +0
Ajouter une réponse
P粉364642019
P粉3646420192023-09-06 00:31:19 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！