当前位置：首页 > news >正文

【ajax实战07】文章筛选功能

news 2025/6/30 22:18:42

本文章目标：根据筛选条件，获取匹配数据展示
本章**“查询参数对象”指的是，要“获取文章列表”功能**中服务器接口要求配置的对象
在这里插入图片描述

实现步骤如下：

一：设置频道列表数据

二：监听筛选条件改变，保存查询信息到查询参数对象（重点）

查询参数对象如下：

在这里插入图片描述

如何实现筛选思路汇总：

表单结构如下

在这里插入图片描述

获取表单的服务器端接口

在这里插入图片描述

通过获取input的value属性值，传递给“查询参数对象”的status属性值，用于实现文章状态的筛选
通过获取select标签下option标签的value值，传递给“查询参数对象”，用于实现筛选对应的频道内容

三：点击筛选时，传递查询参数对象到服务器

四：获取匹配数据，覆盖到页面展示

// 2.1 设置频道列表数据
function setChannleList() {axios({ url: '/v1_0/channels' }).then(result => {// console.log(result);const form_select = document.querySelector('.form-select')const str = result.data.channels.map((ele, index) => {return `<option value="${index}">${ele.name}</option>`}).join('')form_select.innerHTML = '<option value="" selected = "">请选取文章频道</option>' + str})
}
setChannleList()
// *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelectorAll('.form-check-input').forEach(ele => {// console.log(ele);ele.addEventListener('change', () => {// console.log(ele);searchUrl.status = ele.value})
})
document.querySelector('.form-select').addEventListener('change', (e) => {searchUrl.channel_id = e.target.value
})
// *  2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {//  * 2.4 获取匹配数据，覆盖到页面展示getArtileList()
})