这个问题已经结束，所以我希望其他正在学习 ajax 的新手
并且不是在寻找 jQuery 解决方案会从这个页面得到一些想法。
Asynchronous Javascript And XML (AJAX) 是在不停止整个代码执行的情况下运行的东西（简而言之，AJAX 是异步的）。
在普通的 JavaScript 中，代码是同步执行的。这意味着一个代码不能在执行之前的代码之前执行。
但是，在 AJAX 中，ajax 代码之后的代码仍然会执行，即使 ajax 代码还没有执行完。
jQuery 的$.ajax 方法基本上就是下面过度简化的JavaScript：
function ajax(settings){
var ajax = new XMLHttpRequest(), // initializing AJAX constructor
header = 'application/x-www-form-urlencoded';
ajax.addEventListener('readystatechange', function(e){
if (this.readyState == 4){ // if request is ready
if (this.status == 200) // if request is successful
settings.success(this); // run `success` function
else // if request is unsuccessful
settings.fail(this); // run `fail` function
}
});
if (settings.dataType === 'json') header = 'application/json';
ajax.open(settings.type, settings.url, settings.async); // opens connection with the server
ajax.setRequestHeader('Content-Type', header); // sets ajax request header
ajax.send(settings.data); // sends data to server
}
ajax({
type: 'POST',
url: 'api.php',
dataType: 'json',
data: {},
async: true,
success: function(e){
alert('Ajax successful');
},
fail: function(e){
alert('Ajax failed');
}
});
上面的代码解释了 AJAX 是什么。下面的代码解释了异步的含义。
如果 ajax 设置为同步：
var a = 0;
a += 1;
ajax({
type: 'POST',
url: 'api.php',
dataType: 'json',
data: {},
async: false, // async is set to false
success: function(e){
a += 10;
console.log(a);
},
fail: function(e){
alert('Ajax failed');
}
});
a += 2;
console.log(a);
几秒钟后（因为等待服务器的响应），控制台会在控制台中记录两个13。这是因为a += 2 只会在ajax() 的执行结束后才会执行。
但是，如果将 ajax 设置为异步：
var a = 0;
a += 1;
ajax({
type: 'POST',
url: 'api.php',
dataType: 'json',
data: {},
async: true, // async is set to true
success: function(e){
a += 10;
console.log(a);
},
fail: function(e){
alert('Ajax failed');
}
});
a += 2;
console.log(a);
控制台将立即首先记录3，然后在几秒钟后记录13。这是因为当ajax() 正在等待服务器的响应时，a += 2 和后面的代码仍在执行，即使ajax() 仍在执行（等待服务器的响应）。一旦服务器响应，它将只执行a += 10 和另一个console.log(a)。
当然，要发出有意义的 ajax 请求，您需要在服务器端编写一些代码。
假设我们有一个来自api.php 的假api：
if (isset($_POST['hello']) && isset($_POST['foo'])){
$array = [
'one' => $_POST['hello'],
'two' => $_POST['foo'];
];
}
echo json_encode($array);
然后在 JavaScript 中：
ajax({
type: 'POST',
data: {
hello: 'world',
foo: 'bar',
},
success: function(response){
console.log(response);
},
});
然后控制台将记录类似以下内容：
{
'one': 'world',
'two': 'bar',
}