javascript - 等到ajax完成后再返回函数

Question

我使用此代码从服务器获取消息并将其打印到前端：

var message = getMessageFromServer();
$('.result').html(message);

function getMessageFromServer() {
    var result = null;

    $.ajax({
        url: 'index.php',
        type: 'GET',
        success: function (msg) {
            result = msg;
        }
    });

    return result;
}

它显然不起作用，因为 javascript 的工作方式return result是在 ajax 完成之前运行该行，因此我的函数getMessageFromServer总是返回 null。

我整天都在搜索这个问题并得到了很多答案，例如将异步设置为 false、完成时使用、回调、重新构建代码以使其对 ajax 更友好等。但是，我使用的框架不会t 让我自由地重新构建我的代码，所以我需要自己提出问题：如何在以下条件下将消息打印到前端：

• 前 2 行不能更改，我需要将结果返回到message，以便打印到前端。

• 不使用，async: false因为它不利于用户体验。

• 我们可以创建更多的方法，只要在函数内部使用getMessageFromServer

P/s：如果您想知道，我正在使用的框架是 Magento，我正在尝试使用 AJAX 添加自定义验证规则，但我的主要问题是 javascript，所以我没有将它放入标签中。

标签： javascriptjqueryajax

Answer 1

这是 JS 和异步回调的本质。而不是分配var message = getMessageFromServer()，您应该$('.result')在成功回调中设置 from 。

getMessageFromServer();

function getMessageFromServer() {

    $.ajax({
        url: 'index.php',
        type: 'GET',
        success: function (msg) {
            $('.result').html(msg);
        }
    });

    return result;
}