jQuery 追加 api 调用

Question

javascript 和 jQuery 的新手，我有一个问题。

我正在尝试制作一个包含不同类别和文章的简单订单。类别和文章是从 RESTful 网络服务调用的。

这就是我到目前为止所得到的。第一个 api 调用获取所有类别：

function createform() {
var dateval = '';
dateval += $("#dedate").val();

$.api.getArtCategories(dateval, getToken('user'), getToken('token'), function(response) {
    buildOrderform(response);
});

$('#orderform').show();
$("#ordersubmit").removeClass("disabled");
}

buildOrderform 函数创建 html:

function buildOrderform(json) {
//create categories
var html = '';
json.forEach(function (entry) {
    var art_category = entry.art_category;
    html += '<div class="row form-group categorycontainer">';
    html += '<div class="col-md-8 categoryheader">';
    html += '<h3>' + art_category + '</h3>';
    html += '</div>';
    html += '</div>';
});

$("#orderlist").html(html);

//append articles to the categories
$(".categorycontainer").append("API-Call");
}

我卡在这里了。最后一条语句遍历所有容器并追加新的 html。如果我用 <p>test</p> 这样做，它会按预期工作。

但我想通过另一个 api 调用获得 HTML。

第二个 api 调用将是：

$.api.getArtItems(art_category, getToken('user'), getToken('token'), function(response) {
    builditemlist(response);
});

buildItemlist 应该是这样的：

function builditemlist(json) {
var item = '';
json.forEach(function (entry2) {
    var art_description = entry2.art_description;
    var art_id = entry2.art_id;
    var art_name = entry2.art_name;
    var art_price = entry2.art_price;
    item += '<div class="row form-group">';
    item += '<div class="col-md-8"><b>' + art_name + '</b><br>' + art_description + '</div>';
    item += '<div class="col-md-2">' + art_price + '</div>';
    item += '<div class="col-md-2"><input class="form-control article" id="' + art_id + '" type="text"/></div>';
    item += '</div>';

});
return item;
//$("#orderlist").html(item);
}

但是如何将 api 调用和 html 创建添加到追加中？实际的 art_category 确实必须传递给 api 调用？

Answer 1

这些是异步调用中的异步调用，因此创建循环有点复杂。下面是我将如何做的一个例子。我还没有测试过，所以你可能需要修正一些小错误，不过一般的方法应该是可行的。我想我已经给函数命名了，这样就很容易理解发生了什么。

另外两个提示：

确保发现错误并告诉用户出了什么问题。示例代码在注释中。
类目创建后才显示更好，所以任何与请求成功相关的显示状态都应该在异步回调中。

代码：

function createform() {
    var dateval = '';
    dateval += $("#dedate").val();

    $.api.getArtCategories(dateval, getToken('user'), getToken('token'), function(re) {
        //should handle error
        // e.g. if(re.error){   }
        buildCategories(re,function(err,categories){ //will be called after all list items for each category are created
            if(err){
            //display error to user, see comment in build Categories
            }
            else{
                $("#orderlist").empty().append( categories );
                $('#orderform').show();
                $("#ordersubmit").removeClass("disabled");
             }
        });

    });

}

function buildCategories(categories,callback){

    var categoryItems = [];

    var requestNexCategoryContent = function(){
        if(categories.length ===0){
            callback(null,categoryItems)
        }
        else{
            var category = categories.shift()
                ,categoryItem = buildCategoryItem( category  )
                ;
            $.api.getArtItems(category.art_category, getToken('user'), getToken('token'), function(re) {
                //should catch errors her as well
                // e.g. if(re.error){ callback(err,null);return; }
                categoryItem.append( buildItemsForCategory( re ) );
                categoryItems.push( categoryItem )
                requestNextCategoryContent();
            });
        }

    }

    requestNextCategoryContent();

}

function buildCategoryItem(data){
    var item = '<div class="row form-group categorycontainer">';
        item += '<div class="col-md-8 categoryheader">';
        item += '<h3>' + data.art_category+ '</h3>';
        item += '</div>';
        item += '</div>';
     return $(item);
}

function buildItemsForCategory( list ){
    return list.map( function( i,data ){
        var item = '<div class="row form-group">';
            item += '<div class="col-md-8"><b>' + data.art_name + '</b><br>' + data.art_descriptionn + '</div>';
            item += '<div class="col-md-2">' + data.art_price + '</div>';
            item += '<div class="col-md-2"><input class="form-control article" id="' + data.art_id + '" type="text"/></div>';
            item += '</div>';
        return item;
    });
}

jQuery 追加 api 调用

jQuery append with api call

html

javascript

jquery

append