当前位置：首页 > 前端开发 > 正文

HTML表单提交后，如何在页面上显示处理结果？

admin
前端开发
2025-09-22
8

HTML提交表单后，数据通常会通过HTTP请求发送到服务器进行进一步处理，在用户提交表单之前，你可能希望在页面上显示一些信息，比如提交成功或失败的提示，以下是一些方法,可以帮助你在HTML中实现这一功能：

使用JavaScript显示信息

JavaScript是处理表单提交后显示信息的一种常用方法,以下是一个简单的例子：

HTML表单提交后，如何在页面上显示处理结果？第1张

使用AJAX显示信息

AJAX（Asynchronous JavaScript and XML）是一种技术，允许网页与服务器交换数据而不重新加载整个页面,以下是一个使用AJAX的例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8">Form Submission Example</title> <script> function handleSubmit() { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 var formData = new FormData(document.getElementById('myForm')); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.open('POST', 'submit_form.php', true); // 设置请求完成的回调函数 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { // 显示提交成功信息 document.getElementById('message').innerHTML = 'Form submitted successfully!'; } else { // 显示提交失败信息 document.getElementById('message').innerHTML = 'Error submitting form.'; } }; // 发送表单数据 xhr.send(formData); } </script> </head> <body> <form id="myForm" onsubmit="handleSubmit()"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> <div id="message"></div> </body> </html>

使用服务器端脚本显示信息

如果你希望服务器端脚本处理表单提交，并在服务器端显示信息,你可以使用以下方法：

HTML表单提交后，如何在页面上显示处理结果？第2张

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8">Form Submission Example</title> </head> <body> <form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { // 处理表单数据 // ... // 显示提交成功信息 echo 'Form submitted successfully!'; } else { // 显示默认信息 echo 'Please submit the form.'; } ?> </body> </html>

FAQs

Q1: 如何在表单提交后显示一个加载动画？

A1: 你可以使用CSS动画或JavaScript库（如Spin.js）来创建一个加载动画,以下是一个简单的CSS动画示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8">Form Submission Example</title> <style> #loading { border: 5px solid #f3f3f3; borderradius: 50%; bordertop: 5px solid #3498db; width: 50px; height: 50px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <form id="myForm" onsubmit="handleSubmit()"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> <div id="loading" style="display:none;"></div> <div id="message"></div> <script> function handleSubmit() { // 显示加载动画 document.getElementById('loading').style.display = 'block'; // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 var formData = new FormData(document.getElementById('myForm')); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.open('POST', 'submit_form.php', true); // 设置请求完成的回调函数 xhr.onload = function() { // 隐藏加载动画 document.getElementById('loading').style.display = 'none'; if (xhr.status >= 200 && xhr.status < 300) { // 显示提交成功信息 document.getElementById('message').innerHTML = 'Form submitted successfully!'; } else { // 显示提交失败信息 document.getElementById('message').innerHTML = 'Error submitting form.'; } }; // 发送表单数据 xhr.send(formData); } </script> </body> </html>

Q2: 如何在表单提交后重置表单？

A2: 你可以在AJAX请求完成后重置表单,以下是一个示例：

HTML表单提交后，如何在页面上显示处理结果？第3张