0

我正在摸索如何将 2 个 jQuery ajax 调用的结果组合起来，这些调用将结果返回到同一个 DOM 元素中。这是我的设置：

  • 有 2 个调用：一个来自食物列表，第二个来自成分列表
  • 两个调用都返回一个成分列表
  • 这个想法是根据 2 个来源（食物清单和成分清单）制作购物清单（要购买的成分）
  • 用户可以通过选择食物（从数据库中检索成分）来创建购物清单，也可以直接从成分列表中选择成分

问题：这 2 个调用各自运行良好。但问题是一次调用的结果总是替换第二次调用的结果，反之亦然。

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

});

我尝试$('.ingredients').html(result);使用append而不是使用这条线，html但这不起作用，因为用户应该能够从列表中删除成分（请参阅两个函数中的 if 条件）。

4

3 回答 3

3

只需为它们使用不同的容器

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

然后设置.html()of$("#first")和$("#second")而不是.ingredients

于 2012-07-02T07:16:13.770 回答
0

使用.append

 $('.ingredients').append(result);
于 2012-07-02T07:14:51.850 回答
0

看看这是否是答案下划线js模板

您需要做的不是传回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);
});
于 2012-07-02T07:31:06.223 回答