JS如何在使用ajax后获取嵌入元素的值答案

【问题标题】：JS How to get value of embeded element after using ajaxJS如何在使用ajax后获取嵌入元素的值
【发布时间】：2016-08-03 21:03:40
【问题描述】：

这是我的问题。我有外部文件 include.html，我用 $.ajax 加载并附加到正文。 include.html的内容：

<p id="descriptionText">My description</p>

我想在 ajax 完成后获取 p#descriptionText 的值，但结果我看到“未定义”

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">
    <title>AJAX</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "include.html",
                dataType: "html",
            }).done(function (response) {
                $('body').html(response);
            });

            console.log($('#descriptionText').val());
        });
    </script>
</head>
<body>

</body>
</html>

即使我尝试使用闭包，结果也是一样的。下面的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script>
        function func() {
            $.ajax({
                url: "include.html",
                dataType: "html",
            }).done(function (response) {
                $('body').html(response);
            });

            return function() {
                console.log($('#descriptionText').val());
            }
        }

        func()();
    </script>
</head>
<body>

</body>
</html>

如果我在$.ajax 中使用async: false 参数，它可以工作，但我需要完全异步。我的问题是什么？谢谢！

【问题讨论】：

您无需等待 $.ajax 完成通话。您可以尝试自定义回调。
How do I return the response from an asynchronous call?的可能重复
或stackoverflow.com/questions/9466241/…

标签： javascript jquery ajax

【解决方案1】：

简而言之：将console.log($('#descriptionText').val()); 移动到$.ajax() 的.done() 回调中

喜欢：

.done(function (response) {
    $('body').html(response);
    console.log($('#descriptionText').val());
});

说明：

.done() 是 promise 解决时的成功回调。异步领域的承诺意味着代码将在当前时钟滴答之后的某个时间点执行。您的 console.log 在此时执行，因此将始终未定义，因为承诺尚未解决。

所以，soln 是要注意你的console.log 在promise 解决后执行。以多种可能的方式执行此操作，一个简单的方式就像我之前提到的那样：在执行 .html() DOM 操作之后将语句移动到 .done() 中。

【讨论】：

【解决方案2】：

您搞砸了异步流程。将输出移动到异步回调中。像这样：

$(document).ready(function () {
    $.ajax({
        url: "include.html",
        dataType: "html",
    }).done(function (response) {
        $('body').html(response);
        console.log($('#descriptionText').val());
    });
});

【讨论】：

【解决方案3】：

这个问题确实与异步代码执行有关。这一行：

        console.log($('#descriptionText').val());

... 执行 before 这执行：

            $('body').html(response);

这是因为您提供给.done 的回调函数是异步执行的，当收到Ajax 响应时，并且 JavaScript 正在读取事件队列以查看接下来要执行的操作。但这只会在当前执行的代码完成（即调用堆栈被清空）时发生。

所以...要解决这个问题，您必须将代码移动到 done 回调中：

        }).done(function (response) {
            $('body').html(response);
            console.log($('#descriptionText').val());
        });

【讨论】：

【解决方案4】：

因此，将响应附加到正文的回调是代码中唯一等待请求完成的部分。因此函数是用.done(...) 定义的。

如果您像这样将代码添加到此函数中，它将起作用。

.done(function (response) {
    $('body').html(response);
    console.log($('#descriptionText').val());
});

【讨论】：