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

程序员微木

已于 2024-06-28 15:06:03 修改

阅读量456

点赞数 13

分类专栏： # ajax实现数据管理平台实战文章标签： ajax 前端 javascript

于 2024-06-28 15:00:36 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/140041892

版权

ajax实现数据管理平台实战专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

实现步骤如下：

一：设置频道列表数据

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

查询参数对象如下：

在这里插入图片描述

如何实现筛选思路汇总：

表单结构如下

在这里插入图片描述

获取表单的服务器端接口

在这里插入图片描述

通过获取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()
})