多个JQuery getJSON调用MVC控制器不执行Synchronously

时间:2012-07-06 20:42:15

标签: jquery asp.net-mvc-4 getjson

我正在使用MVC4构建POC。我有一些jquery json调用2个不同的MVC控制器。我需要第二个在运行之前等到第一个完成,因为第二个需要在第一个中创建一个cookie。 GetUserItem应首先运行,并在完成后运行GetMoreFeedItems。

这是我的代码段:

var pageNumber = 0;
var feedCount = -1;
var itemsLoaded = 0;
var resultsPerPage = 10;
var loadingData = false;

$(document).ready(function () {

    GetUserItem();
});


function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

    });

    GetMoreFeedItems();    
}

function GetMoreFeedItems() {
    if (feedCount == -1 || itemsLoaded < feedCount) { 

        if (loadingData === false) {
            loadingData = true;

            //Add loading spinner
            $('#feed-container').append('<div id="loader" style="height:20px; background-image:url(Images/loading_gray.gif);background-repeat:repeat-x;"></div>');

            $.getJSON('/controllers/Feed/' + pageNumber + '/' + resultsPerPage, function (result) {

                feedCount = result.substring(0, result.indexOf(','));

                var feed = $.parseJSON(result.substr(result.indexOf(',') + 1));

                $.each(feed, function (i, item) {
                    if (item.itemtype === "checkin")
                        $('#feed-container').append(buildOne(item));
                    else if (item.itemtype === "like")
                        $('#feed-container').append(buildTwo(item));
                    else if (item.itemtype === "post")
                        $('#feed-container').append(buildThree(item));
                    else if (item.itemtype === "message")
                        $('#feed-container').append(buildFour(item));
                    else if (item.itemtype === "story")
                        $('#feed-container').append(buildFive(item));
                });

                loadingData = false;
                itemsLoaded += resultsPerPage;

                //Remove loading spinner
                $('#loader').remove();
            });
        }
    }
}

1 个答案:

答案 0 :(得分:3)

将调用GetMoreFeedItems()置于$.getJSON()的成功函数内。

function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

        GetMoreFeedItems();    


    });

}