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

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

实现步骤如下：

一：设置频道列表数据

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

查询参数对象如下：

如何实现筛选思路汇总：

表单结构如下

获取表单的服务器端接口

1. 通过获取input的value属性值，传递给“查询参数对象”的status属性值，用于实现文章状态的筛选
2. 通过获取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()
})

如何赚钱

现在是否厌倦了程序员朝九晚五的生活，想给自己生活寻找另一条路径；在校大学生是否愿意在校进行人生中的第一次创业，获取人生第一桶金；是否正在看此篇文章的你愿意通过五年努力，让自己开上梦想的中的车子；

那就从提升认知开始，加入微木的知识星球：微木的创业思考

专属于创业者的交流集中地，创业、认知提升找微木！

1 创业底层方法论

2 从千万本书书籍中挑选出的，人生必读书目清单。

3 认知提升学习资源（秘密）

4 寻找赚钱项目底层方法论

5 好书精华提炼

6 深度链接微木

每天仅需0.3元/天，欢迎加入专属于创业者的交流集中地，创业、认知提升找微木！