javascript和HTML手机端实现多条件筛选的实战记录(筛选层的展示与隐藏、AJAX传输数组) 作者:System 时间:2024年08月16日 分类:所有,ajax 字数:1482 // 假设有一个函数来处理筛选条件并发送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);JavaScriptCopy这个代码示例提供了一个简化的框架,用于实现在移动端使用JavaScript和HTML进行多条件筛选,并通过AJAX请求动态更新列表内容。注意,这里的代码只是一个示例,并且假设了一些DOM元素和API的存在。在实际应用中,你需要根据你的应用程序的具体情况来调整这些假设。
评论已关闭