重写后的标题为：使用PHP按钮结合jQuery和POST方法来获取返回值
P粉738821035
2023-09-05 08:42:27
<p>我有一个简单的表单来获取用户名，并希望实现以下目标：</p>
<ul>
<li>当用户点击按钮时，按钮将被禁用以防止多次点击（在实际情况下可能需要几秒钟来处理所有数据，例如调用API、写入数据库等）；</li>
<li>点击后，需要发生新的POST请求，以便在PHP中捕获$_POST['username']并进一步处理请求。</li>
</ul>
<p>如何实现这个目标？</p>
<p>代码如下，但不按预期工作：</p>
<pre class="brush:php;toolbar:false;"><?php
session_start();
// 当表单提交时处理表单数据
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST['submit-button'])) {
$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="submit" id="submit-button" name="submit" 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){
document.getElementById("submit-button").disabled = true;
document.getElementById("submit-button").value="Processing, please wait...";
document.getElementById("your_form_id").submit();
});
</script>
</body>
</html></pre></p>
您正在使用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>