Возврат асинхронного результата из AJAX, вызванного из динамически загруженной страницы - PullRequest
Новая
       28

Возврат асинхронного результата из AJAX, вызванного из динамически загруженной страницы

0 голосов
/ 29 декабря 2018

В настоящее время у меня есть страница, которую я загрузил с помощью 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'
    });
}

Консоль ничего не регистрирует, когда у меня включена функция ajaxComplete на body, но я немного читал, и это то, что кто-то предложил мне делать динамическизагруженные страницы.

Когда я удаляю вызов 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();
        });
    });

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

Проблема была решена путем изменения файлов page.html и getmycontent.js соответственно.Использование обратного вызова позволило мне обрабатывать данные после их получения.См. ASync Callback Promise .

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
    });
}
0 голосов
/ 29 декабря 2018

Это может быть связано со следующей причиной:

Дополнительные примечания:

  • Начиная с jQuery 1.9, все обработчики глобальных событий Ajax jQuery, включая добавленные с помощью метода .ajaxComplete(), должен быть присоединен к document.
  • Если $.ajax() или $.ajaxSetup() вызывается с параметром global, установленным на false, метод .ajaxComplete() не будет запускаться.

Для получения дополнительной информации о $.ajaxComplete() ознакомьтесь с документацией .

...