jQuery append with api call

jQuery append with api call

本文关键字：call api with append jQuery      更新时间：2023-09-26

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 调用？

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

另外两个提示：

  • 确保捕获错误并告诉用户出了问题。示例代码在注释中。
  • 最好仅在创建类别后显示类别，因此与成功请求相关的任何显示状态都应位于异步回调中。

法典：

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;
    });
}
相关文章：