從動態加載的頁面調用的AJAX返回異步結果

Question

目前，我有一個使用jQuery加載的頁面，如下所示：

$('#content').load('mypage.html');

這稱為site.js內部。 在加載的頁面中，我已經加載了一個腳本，試圖從中返回異步結果，因此它不會凍結。

頁面如下：

<div id="mycontent"></div>

<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
    $(function() {
        $('body').ajaxComplete(function() {

            var ids = {
                "h1": 123,
                "h2": 12345
            };

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) {
                var mylist;

                var call = getMyList(v).done(function(r) {
                    if(r) {
                        mylist = r.mylist;
                    } else {
                        mylist = null;
                    }
                }).fail(function(x) {
                    alert(x);
                });

                console.log(mylist);

            });

            //$('.loader-wrapper').hide();
        });
    });
</script>

這是getmycontent.js ：

function getMyList(id) {
    var url = 'https://api.myurl.org/v1/lists/' + id;
    return $.ajax({
        url: url,
        type: 'get',
        dataType: 'json'
    });
}

當我在body上具有ajaxComplete函數時，控制台不會記錄任何內容，但是我正在閱讀，這是有人建議我對動態加載的頁面進行的操作。

當我刪除ajaxComplete調用時，在控制台中得到了這個：

send @ jquery.min.js:2
ajax @ jquery.min.js:2
w._evalUrl @ jquery.min.js:2
Re @ jquery.min.js:2
append @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
z @ jquery.min.js:2
html @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.fn.load @ jquery.min.js:2
(anonymous) @ site.js:20
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
6VM400:34 undefined

這是來自控制台的VM400：

$(function() {
        $('body').ajaxComplete(function() {

            var ids = {
                "h1": 123,
                "h2": 12345
            };

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) {
                var mylist;

                var call = getMyList(v).done(function(r) {
                    if(r) {
                        mylist = r.mylist;
                    } else {
                        mylist = null;
                    }
                }).fail(function(x) {
                    alert(x);
                });

                console.log(mylist);

            });

            //$('.loader-wrapper').hide();
        });
    });

Answer 1

這可能是由於以下原因：

補充筆記：

• 從jQuery 1.9開始，所有用於jQuery全局Ajax事件的處理程序，包括那些添加了.ajaxComplete()方法的處理程序，都必須附加到document 。
• 如果在global選項設置為false情況下調用$.ajax()或$.ajaxSetup() ，則不會觸發.ajaxComplete()方法。

有關$.ajaxComplete()更多信息，請參閱文檔 。

Answer 2

通過分別更改page.html和getmycontent.js文件，此問題已解決。 使用回調使我可以在檢索到數據后處理它們。 請參閱ASync回調承諾 。

page.html ：

<div id="mycontent"></div>

<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
    function callback(result) { console.log(result) }

    $(function() {
            var ids = {
                "h1": 123,
                "h2": 12345
            };

            //$('.loader-wrapper').show();

            // Iterate over id numbers
            $.each(ids, function(k, v) {
                var call = getMyList(v, callback);
            });
    });
</script>

getmycontent.js ：

function getMyList(id, callback) {
    var url = 'https://api.myurl.org/v1/lists/' + id;
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        async: true,
        success: callback
    });
}