重寫後的標題為：使用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>