Question

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

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

这是我到目前为止所得到的。第一个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调用

1 个答案: