P粉6158297422023-09-06 00:44:03
您正在使用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>
P粉3646420192023-09-06 00:31:19
为了实现这一点,可以使用以下原则:
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>