jQuery AJAX 调用在没有命令的情况下启动 when.done function 添加

Question

I'm rewriting a series of jQuery AJAX requests and have been having trouble with .done code blocks.我正在重写一系列 jQuery AJAX 请求并且遇到了.done代码块的问题。 I'm attempting to send an AJAX request and wait for the response before processing the data.我正在尝试发送 AJAX 请求并在处理数据之前等待响应。 As a guide, I have been using the following page: http://michaelsoriano.com/working-with-jquerys-ajax-promises-and-deferred-objects/作为指导，我一直在使用以下页面： http://michaelsoriano.com/working-with-jquerys-ajax-promises-and-deferred-objects/

I've also looked at countless stack questions to try and troubleshoot my issues, but haven't found anything which has helped.我还查看了无数堆栈问题以尝试解决我的问题，但没有找到任何有帮助的东西。 For reference, some of the questions I've looked at are below:作为参考，我看过的一些问题如下：
jQuery Ajax call not processing.done jQuery Ajax 调用未处理。完成
jquery ajax done function not firing jquery ajax 完成 function 未触发
Confused on jquery.ajax.done() function 对 jquery.ajax.done() function 感到困惑

I've noticed that when I create code blocks which are similar to the guide above, the functions run on page load, rather than when they are triggered in code.我注意到，当我创建与上述指南类似的代码块时，函数会在页面加载时运行，而不是在代码中触发时运行。 To isolate the fault, I created a simple example, as below:为了隔离故障，我创建了一个简单的示例，如下所示：

<!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>

I was expecting that when my example page loaded, nothing would happen, as there was no trigger to execute the getData() function unless the button was clicked.我期待当我的示例页面加载时，什么都不会发生，因为除非单击按钮，否则不会触发执行getData() function。 However, when I load the page, my console logs 'enter getData' and then 'enter done', and I get an alert with the contents of my ./testajax.html page (just a single string).但是，当我加载页面时，我的控制台会记录“输入 getData”，然后“输入完成”，并且我会收到一条警报，其中包含我的./testajax.html页面的内容（只是一个字符串）。 Further, when I then click the button, it enters getData() but doesn't trigger the getData().done function, so no alert is received.此外，当我单击该按钮时，它会进入getData()但不会触发getData().done function，因此不会收到任何警报。

Is anyone able to guide me on the right track here and help me prevent the getData() function from executing on page load, and instead make the button click execute the AJAX request, wait for the result, then execute the code in the .done block?有谁能在这里指导我走上正确的轨道并帮助我防止getData() function 在页面加载时执行，而是让按钮单击执行 AJAX 请求，等待结果，然后执行.done中的代码堵塞？

Answer 1

The getData() expression you have immediately calls the function on pageload.您拥有的getData()表达式会在页面加载时立即调用 function。 Then you attach a .done handler to it.然后将.done处理程序附加到它。

It sounds like you want a function that calls $.ajax and attaches .done to it, like:听起来您想要一个调用$.ajax并附加.done的 function ，例如：

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

Then attach getData as an event handler somewhere.然后将getData作为事件处理程序附加到某处。

Don't use inline handlers . 不要使用内联处理程序。 Use .addEventListener or jQuery's .on('click' instead.使用.addEventListener或 jQuery 的.on('click'代替。

jQuery AJAX 调用在没有命令的情况下启动 when.done function 添加

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-01 03:58:38

jQuery AJAX 调用在没有命令的情况下启动 when.done function 添加

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-01 03:58:38

解决方案1
1 已采纳 2021-06-01 03:58:38