ajax调用不能一键工作

Question

我有一个 html 代码：

HTML:

<div  id="all" aria-expanded="true">all</div>

我想要当这个 div 被点击时，ajax 调用：

AJAX：

$("#all").click(function () {

    $( "#adv-article-list" ).empty();
    $("#adv-article-list-pagination").empty();
    $.ajax({
        url: 'ajax_index.php', 
        type: "POST",
        dataType:'json',
        data: {name: 1},
        success: function(data)
        {
            arr_db=data;
        }
    });
    function(arr_db);
})

我的代码可以正常工作，但不是一键即可。我必须在 div 上单击两次。 为什么？

PHP：

$userAnswer = $_POST['name'];
$servername = "localhost";
$username = "root";
$password = "";
$dbname="db";

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->query("SET NAMES 'utf8'");

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$result = $conn->query("SELECT * FROM wp_moeee ORDER BY  ID DESC");
$ar=array();

while ( $row = mysqli_fetch_assoc($result)){
    $ar[] = $row; // add the row in to the results (data) array
}

echo json_encode($ar);

Answer 1

因为jQuery $.ajax request 默认是异步的。

async (默认: true) 类型: Boolean 默认情况下，所有请求都被发送 异步（即默认设置为 true）。如果你需要 同步请求，将此选项设置为 false。

虽然你可以改变它：

请注意，同步请求可能会暂时锁定浏览器， 在请求处于活动状态时禁用任何操作。

第一次触发点击事件时会发生这种情况：

1. ajax 请求已经发送，然后
2. function(arr_db); 已执行，arr_db 尚未设置
3. ajax 响应触发了 jQuery 的 success 回调和 arr_db=data;

第二次触发点击事件：

1. 已发送第二个 ajax 请求，而不是
2. function(arr_db); 已执行，使用来自第一个响应的 arr_db
3. 第二个ajax响应触发了jQuery的success回调和arr_db=data;