Javascript 合并两个jQuery ajax调用的结果

我正在琢磨如何组合两个jQuery ajax调用的结果，这些调用将结果返回到同一个DOM元素中。以下是我的设置：

有两个电话：一个来自食物列表，另一个来自配料列表 两个调用都返回一个成分列表 这个想法是根据两种来源的食物清单和配料清单，制作一份购物清单 用户可以通过选择从数据库中检索的食品配料或直接从配料列表中选择配料来创建购物列表 问题：这两个电话各自工作正常。但问题是，一次调用的结果总是替换第二次调用的结果，反之亦然

var postUrl = "http://localhost:8000/ingredients/";
var ingrUrl = "http://localhost:8000/ingrs/";
var selectedFoods = [];
var selectedIngrs = [];


$('.foods a').click(function(event){
    clickedLink = $(this).attr('id');

    if (selectedFoods.indexOf(clickedLink) != -1) {
        var index = selectedFoods.indexOf(clickedLink);
        selectedFoods.splice(index, 1);}   
    else {
        selectedFoods.push(clickedLink);
    };

    var jsonFoods = JSON.stringify(selectedFoods);
    $.ajax({
        url: postUrl,
        type: 'POST',
        data: jsonFoods,
        dataType: 'html',
        success: function(result){
            $('.ingredients').html(result);
            }
    });       
});


$('.ingr-list a').click(function(event) {
    clickedIngr = $(this).attr('id');


    if (selectedIngrs.indexOf(clickedIngr) != -1) {
        var index = selectedIngrs.indexOf(clickedIngr);
        selectedIngrs.splice(index, 1);}   
    else {
        selectedIngrs.push(clickedIngr);
    };

    var jsonIngrs = JSON.stringify(selectedIngrs);
    $.ajax({
        url: ingrUrl,
        type: 'POST',
        data: jsonIngrs,
        dataType: 'html',
        success: function(result){
            $('.ingredients').html(result);
            }
    });

});

我试着用这行代码$'.配料'.htmlresult；使用append而不是html，但这不起作用，因为用户应该能够从列表中删除成分，查看两个函数中的if条件。

使用

使用

---

只需使用不同的容器即可

<div class="ingredients">
    <div id="first"></div>
    <div id="second"></diV>
</div>

---

然后将.html设置为$first和$second，而不是.components

只需使用不同的容器即可

<div class="ingredients">
    <div id="first"></div>
    <div id="second"></diV>
</div>

---

然后将.html设置为$first和$second，而不是.components

看看这是否是答案

您需要做的不是传回html，而是传回json，并使用js模板在浏览器上呈现它

一些假代码：

var global_ingredients = [];
var list = "<% _.each(ingredients, function(ingredient) \
           { %> <li><%= ingredient.name %></li> <% }); %>;";

$.post('', postdata, function(ingredients){
    global_ingredients.push(ingredients); 
    // here you could also eliminate duplicated ingredients, 
    // sort the ingredients, do whatever you likes
    var new_html = _.template(list,  global_ingredients); 
    $('.ingredients').html(new_html);
});

---

看看这是否是答案

您需要做的不是传回html，而是传回json，并使用js模板在浏览器上呈现它

一些假代码：

var global_ingredients = [];
var list = "<% _.each(ingredients, function(ingredient) \
           { %> <li><%= ingredient.name %></li> <% }); %>;";

$.post('', postdata, function(ingredients){
    global_ingredients.push(ingredients); 
    // here you could also eliminate duplicated ingredients, 
    // sort the ingredients, do whatever you likes
    var new_html = _.template(list,  global_ingredients); 
    $('.ingredients').html(new_html);
});

---

@Esailija我考虑过这个问题，但我需要能够将最终列表作为一个列表进行排序。我认为将配料放在两个不同的容器中会使排序变得复杂，不是吗？@finspin For sorting您可以将它们从容器中分离出来，对它们进行排序，然后将它们放回配料容器中。你什么时候开始排序？@Esailija我目前正在从和的数据库检索配料时进行排序。因此，ajax响应是一个已经排序的html列表。@finspin Right，这不会对数据库中的排序产生任何影响。@Esailija我考虑过这一点，但我需要能够将最终列表作为一个列表进行排序。我认为将配料放在两个不同的容器中会使排序变得复杂，不是吗？@finspin For sorting您可以将它们从容器中分离出来，对它们进行排序，然后将它们放回配料容器中。你什么时候开始排序？@Esailija我目前正在从和的数据库检索配料时进行排序。所以ajax响应是一个已经排序的html列表。@finspin Right，这不会对数据库中的排序产生任何影响。