javascript和HTML手机端实现多条件筛选的实战记录（筛选层的展示与隐藏、AJAX传输数组）

// 假设有一个函数来处理筛选条件并发送AJAX请求
function applyFilters() {
    var filters = {};
    // 获取筛选条件，例如：选择的城市、类型等
    var city = $('#city-filter').val();
    var type = $('#type-filter').val();
    if (city !== 'all') {
        filters.city = city;
    }
    if (type !== 'all') {
        filters.type = type;
    }
    // 发送AJAX请求，并在回调中处理响应数据
    $.ajax({
        url: '/api/listings',
        data: filters,
        type: 'GET',
        success: function(data) {
            // 更新列表或页面上的内容
            $('#listings').html(''); // 清空列表
            $.each(data, function(index, listing) {
                $('#listings').append('<li>' + listing.name + '</li>');
            });
        },
        error: function() {
            alert('Failed to load listings');
        }
    });
}
 
// 假设有一个函数来根据筛选条件显示或隐藏对应的筛选层
function toggleFilterLayer(filterType, isVisible) {
    if (isVisible) {
        $('#' + filterType + '-filter-layer').show();
    } else {
        $('#' + filterType + '-filter-layer').hide();
    }
}
 
// 假设有一个函数来初始化页面
function initPage() {
    // 根据需要显示或隐藏筛选层
    toggleFilterLayer('city', true);
    toggleFilterLayer('type', false);
    // 设置筛选器的默认值
    $('#city-filter').val('all');
    $('#type-filter').val('all');
    // 应用筛选条件
    applyFilters();
}
 
// 页面加载完成后执行初始化函数
$(document).ready(initPage);

这个代码示例提供了一个简化的框架，用于实现在移动端使用JavaScript和HTML进行多条件筛选，并通过AJAX请求动态更新列表内容。注意，这里的代码只是一个示例，并且假设了一些DOM元素和API的存在。在实际应用中，你需要根据你的应用程序的具体情况来调整这些假设。