接受基于从Ajax响应

问题描述：

我从用户服用2个输入输入附加的用户输入：接受基于从Ajax响应

区域
时间

基于这些，我显示地区在那时间。我也想显示这些餐厅所服务的所有菜肴，如复选框。然后，用户可以从这些复选框中进行选择，并且餐厅也可以根据美食进行过滤。

我面对的问题是，在我展示这些餐厅所服务的所有菜肴后，我无法找到改变基于这些菜肴的结果的方式。

这可以通过创建2个xmlhttpreq对象来解决吗？请给我建议。

它可能可以通过简单的DOM操作来解决。 – 2012-07-28 21:42:47

对不起，我实际上是新的这种东西。所以你可以详细讲述一下吗？ – user1560185 2012-07-28 21:48:43

如果您的餐厅列表显示美食，则可以将每个餐厅的美食存储在数据属性中。当复选框被选中时，你可以根据数据属性对它进行过滤 - 这是一个简单的方法 – Kishore 2012-07-28 21:50:49

答

只要确保您的原始对象具有有关每个餐厅美食的相关信息，那么您可以根据是否在过滤器中包含特定选项来过滤显示给用户的选项。由于隐藏/显示选项不需要任何服务器参与，因此不需要另一个AJAX请求。

This jsfiddle demo显示了简单过滤餐馆列表（使用一个小jQuery）的一种方法。 DOM操作虽然相当基本，但如果不想使用jQuery，则可以在原生JS中轻松模拟change事件。

var time = "8:00pm"; 
var parameters = { 
    area: 1, 
    time: time 
}; 

// Initially only r1, r2, r5 shown 
var restaurants = { 
    r1: { name:"One", cuisine: "Thai", area: "1", time: time }, 
    r2: { name:"Two", cuisine: "Chinese", area: "1", time: time}, 
    r3: { name:"Three", cuisine: "American", area: "2", time: time }, 
    r4: { name:"Four", cuisine: "Mediterranean", area: "1", time: "9:00pm"}, 
    r5: { name:"Five", cuisine: "American", area: "1", time: time } 
}; 

$(document).ready(function() { 
    parameters.cuisine = $('input[name="cuisine"]:checked').map(function() { 
     return $(this).val(); 
    }).toArray(); 

    writeRestaurants(); 

    $('input[name="cuisine"]').change(function(){ 
     var $this = $(this); 
     var a = parameters.cuisine; 
     if($this.is(':checked')) { 
      a.push($this.val());   
     } 
     else { 
      var k = a.indexOf($this.val()); 
      a.splice(k, 1); 
     } 
     writeRestaurants(); 
    }); 
}); 

function writeRestaurants() { 
    $('#restaurants').empty(); 
    for (var i in restaurants) { 
     var include = true; 
     for (var param in parameters) { 
      if(param == 'cuisine'){ 
       if (parameters[param].indexOf(restaurants[i][param]) < 0) { 
        include = false; 
       } 
      } 
      else if (restaurants[i][param] != parameters[param]) { 
       include = false; 
      } 
     } 
     if (include) { 
      $('#restaurants').append('<p>'+restaurants[i].name+'</p>'); 
     } 
    } 
}

接受基于从Ajax响应

相关推荐