Question

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

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

我希望在ajax完成后获得p＃descriptionText的值，但结果我看到“undefined”

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

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

Answer 1

简而言之：将console.log($('#descriptionText').val());移至.done()的{{1}}回调

喜欢：

$.ajax()

<强>解释

.done(function (response) { $('body').html(response); console.log($('#descriptionText').val()); });是承诺解决后的成功回调。异步域中的承诺意味着代码将在比当前时钟滴答更晚的时间点执行。您的.done()此时已执行，因此始终未定义，因此承诺尚未得到解决。

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

Answer 2

你弄乱了异步流程。将输出移动到异步回调。像这样：

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

Answer 3

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

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

...在执行之前执行：

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

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

所以......要解决这个问题，你必须在done回调中移动你的代码：

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

Answer 4

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

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

.done(...)

JS如何在使用ajax后获取embeded元素的值

4 个答案: