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
2023-09-05 08:42:27
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>Pour y parvenir, les principes suivants peuvent être utilisés :
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:
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>