Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不影响页面显示的情况下，与服务器交换数据并更新部分网页内容，在提交表单时，可以使用Ajax技术实现无刷新提交表单。
以下是使用Ajax提交表单的步骤：
1、引入jQuery库
在使用Ajax提交表单之前，需要引入jQuery库，可以通过以下方式引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、编写HTML表单
编写一个简单的HTML表单，包含一个输入框、一个按钮和一个用于显示结果的div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax提交表单示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="username" placeholder="请输入用户名">
<button type="submit">提交</button>
</form>
<div id="result"></div>
</body>
</html>
3、编写JavaScript代码
接下来，编写JavaScript代码，使用jQuery的$.ajax()方法实现表单的提交和数据的处理。
$(document).ready(function () {
$("#myForm").on("submit", function (event) {
event.preventDefault(); // 阻止表单默认提交行为
var formData = $(this).serialize(); // 获取表单数据
$.ajax({
type: "POST", // 请求类型为POST
url: "submit_form.php", // 提交表单的URL地址
data: formData, // 要发送的数据
success: function (response) { // 请求成功时的回调函数
$("#result").html(response); // 将服务器返回的数据显示在div中
},
error: function (jqXHR, textStatus, errorThrown) { // 请求失败时的回调函数
alert("请求失败：" + textStatus + "，错误信息：" + errorThrown);
}
});
});
});
4、创建PHP处理文件
创建一个名为submit_form.php的文件，用于处理表单提交的数据，在这个文件中，可以对数据进行处理，例如将数据存储到数据库等，然后返回处理结果。
<?php // 获取表单数据 $username = $_POST['username']; // 对数据进行处理，例如将数据存储到数据库等 // ... // 返回处理结果 echo "用户名：" . $username; ?>
至此，使用Ajax提交表单的示例已经完成，当用户在表单中输入用户名并点击提交按钮时，表单数据会通过Ajax异步提交到submit_form.php文件进行处理，处理结果显示在页面上的div中，而无需刷新整个页面。