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;
});
}