php - 根据来自 ajax 响应的输入接受额外的用户输入

Question

我从用户那里得到 2 个输入：

1. 区域
2. 时间

基于这些，我正在展示当时该地区的可用餐厅。我还想将这些餐厅提供的所有美食显示为复选框。然后，用户可以从这些复选框中进行选择，也可以根据菜系过滤餐厅。

我面临的问题是，在我展示了这些餐厅提供的所有菜肴后，我无法找到一种方法来根据这些菜肴更改结果。

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

Answer 1

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

这个 jsfiddle 演示展示了一种简单过滤餐厅列表的方法（使用一点 jQuery）。DOM 操作是相当基本的，change如果你不想使用 jQuery，可以很容易地在原生 JS 中模拟事件。

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