添加 .done 函数时，jQuery AJAX 调用无需命令即可启动答案

【问题标题】：jQuery AJAX call initiates without command when .done function added添加 .done 函数时，jQuery AJAX 调用无需命令即可启动
【发布时间】：2021-06-01 03:56:16
【问题描述】：

我正在重写一系列 jQuery AJAX 请求，并且遇到了 .done 代码块的问题。我正在尝试发送 AJAX 请求并在处理数据之前等待响应。作为指导，我一直在使用以下页面： http://michaelsoriano.com/working-with-jquerys-ajax-promises-and-deferred-objects/

我还查看了无数堆栈问题以尝试解决我的问题，但没有找到任何有用的东西。作为参考，我看过的一些问题如下：
jQuery Ajax call not processing .done
jquery ajax done function not firing
Confused on jquery .ajax .done() function

我注意到，当我创建类似于上述指南的代码块时，函数会在页面加载时运行，而不是在代码中触发时运行。为了隔离故障，我创建了一个简单的示例，如下所示：

<!DOCTYPE html>
<html lang="en">

<body>
    <button type="button" onclick="getData()">Click me</button>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//Commented out due comment below   
/*function getData() {
        console.log('enter getData');
        return $.ajax({url:'./testajax.html',type:"POST"});
    }
     
    getData().done(function(data){
        console.log('enter done');
        alert(data);
    });*/

    function getData() {
        console.log('enter getData');
        $.ajax({ url: './testajax.html', type: "POST" })
            .done(function (data) {
                console.log('enter done');
                alert(data);
            });
        alert('after');
    }
</script>

</html>

我期待当我的示例页面加载时，什么都不会发生，因为除非单击按钮，否则不会触发执行 getData() 函数。但是，当我加载页面时，我的控制台会记录“输入 getData”，然后是“输入完成”，并且我会收到一条警报，其中包含我的 ./testajax.html 页面的内容（只是一个字符串）。此外，当我点击按钮时，它会进入getData()，但不会触发getData().done函数，因此不会收到任何警报。

有谁能在这里指导我走上正确的道路并帮助我防止getData()函数在页面加载时执行，而是让按钮单击执行AJAX请求，等待结果，然后执行代码.done 块？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您拥有的getData() 表达式会在页面加载时立即调用该函数。然后将.done 处理程序附加到它。

听起来你想要一个调用$.ajax的函数并且将.done附加到它上面，比如：

function getData() {
    console.log('enter getData');
    $.ajax({ url: './testajax.html', type: "POST" })
        .done(function (data) {
            console.log('enter done');
            alert(data);
        });
}

然后在某处附加getData 作为事件处理程序。

Don't use inline handlers。请改用.addEventListener 或jQuery 的.on('click'。

【讨论】：

感谢@certainperformance，它解决了页面加载时代码执行的问题，但执行时间仍然不正确。我已经更新了问题以包含一个alert('after');，它当前触发before alert(data); 行。有没有办法让它等到 AJAX 请求完成后再继续执行代码？我可以将所有内容嵌套在连续的 .done 函数中，但我正在寻找一种更简洁的方法。
你需要接受 JS 的异步特性——不要害怕使用它。不，没有好的方法可以阻止进一步的代码运行，直到请求完成。一种方法是使用函数：getData().then(processData) 其中processData 是完全同步的