Der umgeschriebene Titel lautet: PHP-Schaltflächen in Kombination mit jQuery- und POST-Methoden verwenden, um Rückgabewerte zu erhalten
P粉738821035
2023-09-05 08:42:27
<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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您正在使用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>为了实现这一点，可以使用以下原则：
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>