Question

嗨大家我在Apache Cordova中制作手风琴菜单（嵌套）时遇到问题。我必须使用两个getjson来获取类别和子类别。第一个函数的中间我调用第二个函数来获取子类别，但第二个函数没有返回包含htmlSubCategories的我最喜欢的字符串，它返回未定义的值

     //Function 1
  var Categoriesdata = [];
function getCategories()
{
    var htmlCategories = "";
    $.getJSON('http://example.com/Categories', null, function (Categoriesdata) {
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            {
                htmlCategories += "<li>";
                htmlCategories += "<a href='#'> " + Categoriesdata[i].Text + "</a>";
                htmlCategories += getCategoriesRev(Categoriesdata[i].Id);
                htmlCategories += "</li>";
            }
       }
            $(".Categories").html(htmlCategories);  
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    var htmlSubCategories = "";
    $.getJSON('http://example.com/CategoriesRev', { id: Id }, function (CategoriesdataRev) {

        if (CategoriesdataRev.length > 0)
        { 
            for (var j = 0; j < CategoriesdataRev.length; j++) {
                htmlSubCategories += "<li>";
                htmlSubCategories += "<a href='#'> " + CategoriesdataRev[j].Text + "</a>";
                htmlSubCategories += getCategoriesRev(CategoriesdataRev[j].Id);
                htmlSubCategories += "</li>";
            }
            htmlSubCategories = "<ul class='submenu'>" + htmlSubCategories + "</ul>";

        }
  return htmlSubCategories;
    });

}

Answer 1

AJAX请求是异步的，这意味着第二次调用在返回时不会完成，htmlSubCategories仍然是一个空字符串。

在JavaScript中，您使用回调或Promises编写异步代码。幸运的是，使用jQuery完成的AJAX请求会返回一个你可以使用的Promise。

我还建议您针对每个子类别进行一次AJAX调用。我只会把它叫做一次，然后用JavaScript过滤。

但是使用现有的东西，以下解决方案使用简单的jQuery：

//Function 1
function getCategories()
{
    $.getJSON('http://example.com/Categories', function (Categoriesdata) {
        var $categories = $('.Categories').html('');
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            $categories
                .append('<li>'
                          + '<a href="#">'
                              + Categoriesdata[i].Text
                          + '</a>'
                          + '<ul id="' + Categoriesdata[i].Id + '"></ul>'
                      + '</li>');

            getCategoriesRev(Categoriesdata[i].Id);
        }
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    $.getJSON('http://example.com/CategoriesRev', { id: Id },
        function(CategoriesdataRev) {
            var $subCategoryUl = $('.Categories').find('ul#' + Id);
            if (CategoriesdataRev.length > 0)
            { 
                for (var i = 0; i < CategoriesdataRev.length; i++)
                {
                    $subCategoryUl
                        .addClass('submenu')
                        .append('<li>'
                                  + '<a href="#"> '
                                      + CategoriesdataRev[i].Text
                                  + '</a>'
                              + '</li>');
                }
            }
            else
                $subCategoryUl.remove();
        });
}

如何停止第一个函数get json直到第二个函数getjson返回数据

1 个答案: