在网页开发中，经常会用到异步请求技术Ajax。Ajax允许以非阻塞方式向服务器发送请求，并实时更新页面的内容，提高用户的体验。然而有时候可能会遇到一个问题，就是本来只提交了一次请求，却出现了多次请求的情况。这种情况主要是由于代码中的一些常见错误所导致的。本文将会通过举例来说明这些常见错误是如何导致Ajax提交一次出现多次请求的。通过了解这些错误，我们可以避免他们并正确地使用Ajax技术。

首先，一个常见的错误是在按钮点击事件中绑定了多次Ajax请求代码。例如，下面的代码片段中，一个按钮绑定了点击事件，在点击按钮时发送了一个Ajax请求：

$(document).ready(function() {
$(".submit-btn").click(function() {
$.ajax({
url: "example.com",
type: "POST",
data: { name: "John", age: 30 },
success: function(response) {
// 处理服务器响应
}
});
});
});

然而，如果上述代码被多次执行绑定，就会导致每次按钮点击时都会发送一次Ajax请求。例如，可能有其他代码在页面加载完成后触发了多次绑定按钮点击事件的操作，这样每次点击按钮都会发送重复的Ajax请求。

另一个常见的错误是在Ajax请求的回调函数中再次绑定了相同的Ajax请求。例如，下面的代码片段中，当Ajax请求成功后，会将回调函数中的元素重新绑定了相同的Ajax请求：

$(document).ready(function() {
$(".submit-btn").click(function() {
$.ajax({
url: "example.com",
type: "POST",
data: { name: "John", age: 30 },
success: function(response) {
$(".submit-btn").click(); //重新绑定Ajax请求
}
});
});
});

这种情况下，每次Ajax请求成功后，都会再次绑定相同的请求，进而导致多次请求的问题。

还有一种情况是在页面加载完成后自动执行了多次Ajax请求的代码。例如，下面的代码片段中，使用了setInterval()函数来每隔一段时间自动执行Ajax请求：

$(document).ready(function() {
setInterval(function() {
$.ajax({
url: "example.com",
type: "POST",
data: { name: "John", age: 30 },
success: function(response) {
// 处理服务器响应
}
});
}, 1000);
});

这个代码片段中，setInterval()函数每隔1秒钟就会执行一次Ajax请求。如果这段代码被执行多次，就会导致Ajax请求多次执行，从而出现多次请求的问题。

综上所述，Ajax提交一次出现多次的问题主要是由于代码中的一些常见错误所导致的。需要检查按钮点击事件的绑定是否被多次执行、回调函数中是否重复绑定了相同的Ajax请求以及页面加载完成后是否有多次自动执行Ajax请求的代码。通过避免这些错误，我们可以正确地使用Ajax技术，提升用户体验。