从动态加载的页面调用的AJAX返回异步结果

时间:2018-12-29 13:35:25

标签: javascript jquery ajax asynchronous jquery-load

目前,我有一个使用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 :(得分:1)

这可能是由于以下原因:

  

附加说明:

     
      
  • 从jQuery 1.9开始,jQuery global Ajax events的所有处理程序,包括添加有SharedPreferences sharedPreferences = getSharedPreferences("stored_position", Context.MODE_PRIVATE); Float savedPositionX = sharedPreferences.getFloat("pos_x", 0); Float savedPositionY = sharedPreferences.getFloat("pos_y", 0); floatingActionButton = findViewById(R.id.floatingActionButton); if (savedPositionX != 0 && savedPositionY != 0) { floatingActionButton.setX(savedPositionX); floatingActionButton.setY(savedPositionY); } //setTranslation has also not worked 方法的处理程序,必须将它们附加到.ajaxComplete()。 li>   
  • 如果在document选项设置为global的情况下调用$.ajax()$.ajaxSetup(),将不会触发false方法。
  •   

有关.ajaxComplete()的更多信息,请查看documentation

答案 1 :(得分:-1)

该问题已通过分别更改page.htmlgetmycontent.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
    });
}