本文将介绍如何使用Ajax来实现在成功提交表单后自动刷新页面的功能。Ajax是一种用于在无需刷新整个页面的情况下与服务器进行数据交互的技术。通过在表单提交后，使用Ajax发送异步请求，我们可以在后台处理请求并返回响应数据，然后使用JavaScript来更新页面内容。以下是一个简单的示例：

<form id="myForm" onsubmit="submitForm(); return false;">
<input type="text" name="name" id="name" />
<input type="submit" value="提交" />
</form>
<script>
function submitForm() {
var name = document.getElementById("name").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert("表单已成功提交！");
location.reload(); // 刷新页面
}
};
xhttp.open("POST", "submit_form.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>

上面的示例代码展示了一个简单的表单，其中包含一个文本输入框和一个提交按钮。当用户在输入框中输入姓名并点击提交按钮时，JavaScript函数submitForm()会被触发。该函数首先获取用户输入的姓名，然后创建一个XMLHttpRequest对象。接下来，通过调用xhttp.open()方法来创建一个HTTP请求，其中包括请求的URL和请求的类型（POST）。然后使用xhttp.setRequestHeader()方法来设置请求头，确保服务器能够正确地解析请求。最后，通过调用xhttp.send()方法来向服务器发送请求，并将用户输入的姓名作为请求的参数。

当服务器接收到请求并成功处理后，它会返回一个HTTP响应。在示例代码中，我们使用xhttp.onreadystatechange事件来监听请求的状态变化。当请求的状态为4（表示请求已完成）且响应的状态码为200（表示请求成功）时，我们通过调用location.reload()方法来刷新页面。这样，用户就可以立即看到表单已成功提交的提示信息。

除了刷新整个页面外，我们还可以使用Ajax来仅更新页面的一部分内容。例如，我们可以在页面中添加一个用于显示提交结果的区域，然后在表单成功提交后，使用JavaScript来更新这个区域的内容。这样可以提供更好的用户体验，并节省带宽和服务器资源。

总之，使用Ajax来实现在成功提交表单后刷新页面（或更新页面内容）是一种简单而强大的技术。它为我们提供了一种在用户提交表单后立即更新页面的方式，无需刷新整个页面。在实际应用中，我们可以根据具体需求来灵活使用Ajax，并结合其他前端技术来实现更加丰富和优秀的用户体验。