点击HTML页面表格表头时如何发送GET请求

实现方法 #

给所有表头绑定点击事件，点击时读取对应表头的id作为请求参数发送GET请求即可，无需修改原有表格结构，代码如下：

JS实现代码 #

把以下代码插入到页面</body>标签之前即可生效：

// 选中当前表格所有表头元素
const headers = document.querySelectorAll('.table thead th')
headers.forEach(th => {
  // 给表头加手型样式，提示用户可点击
  th.style.cursor = 'pointer'
  th.addEventListener('click', () => {
    // 读取当前点击表头的id作为请求参数值
    const clickField = th.id
    // 构造GET请求参数，参数名可根据你的后端接口要求修改
    const requestQuery = new URLSearchParams({
      sort_by: clickField
      // 可在此处追加其他固定参数，比如排序方向：sort_order: 'asc'
    })
    // 异步发送GET请求，把路径替换为你自己的后端接口地址
    fetch(`/your-api-path?${requestQuery.toString()}`)
      .then(response => response.json())
      .then(result => {
        // 请求成功后在这里处理返回结果，比如重新渲染表格数据
        console.log('请求返回结果：', result)
      })
      .catch(error => console.error('请求出错：', error))

    // 如果不需要异步请求，要点击后跳转页面传参，替换为下面这行即可
    // window.location.href = `/your-page-path?${requestQuery.toString()}`
  })
})

补充说明 #

• 如果你需要实现点击同一个表头切换正序/倒序排序，可以额外定义一个变量存储当前排序状态，每次点击时切换对应的参数值即可
• 如果你使用jQuery等前端框架，替换对应的事件绑定写法即可，核心逻辑完全一致
• 表头的id即使带特殊字符也不影响参数读取，不需要修改原有表格的id设置

内容的提问来源于stack exchange，提问作者Ashutosh Mishra