能否在Pug的HTML标签中发送POST/GET请求？锚标签无表单GET请求疑问

首先明确两个核心点：

• 你原本的Pug代码已经在发送GET请求，a标签的href属性本身就是用来发起GET请求并跳转页面的，没触发服务端路由大概率是服务端路由配置的问题，而非前端代码逻辑错误。
• a标签不支持method和action属性，这两个是form标签专属属性，所以你期望的那种写法是无效的。

分两种场景给出具体解决方案：

场景1：需要跳转页面，同时触发服务端路由 #

你的原代码逻辑是正确的，只需确保服务端路由能正确处理带page查询参数的/admin请求即可。以Express框架为例，服务端路由可这么写：

app.get('/admin', (req, res) => {
  // 获取page参数，默认值设为1
  const currentPage = req.query.page || 1;
  // 这里编写分页逻辑，比如查询对应页码的数据
  // ...
  // 渲染页面并传递分页相关数据
  res.render('admin', { pages: [1,2,3,4], currentPage });
});

前端保持你原来的Pug代码即可，也可以优化下上一页/下一页的链接逻辑：

nav
    ul.pagination
        li.page-item
            a.page-link(href="/admin?page=" + (currentPage - 1)) Prev
        each pageNumber in pages
            li.page-item(class=pageNumber == currentPage ? 'active' : '')
                a.page-link(href="/admin?page="+pageNumber)=pageNumber
        li.page-item
            a.page-link(href="/admin?page=" + (currentPage + 1)) Next

场景2：不需要跳转页面，异步发送GET请求（局部刷新） #

如果想实现点击页码不跳转页面，只更新部分内容，需要用JavaScript阻止a标签的默认跳转行为，再通过异步请求发送GET：

1. 修改Pug代码，给a标签加上分页数据标识：

nav
    ul.pagination
        li.page-item
            a.page-link(data-page='prev') Prev
        each pageNumber in pages
            li.page-item
                a.page-link(data-page=pageNumber)=pageNumber
        li.page-item
            a.page-link(data-page='next') Next

2. 新增JavaScript处理点击事件：

// 监听所有分页链接的点击
document.querySelectorAll('.page-link').forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止默认跳转行为
    e.preventDefault();
    const pageType = e.target.dataset.page;
    let targetPage;
    // 处理上一页/下一页逻辑，需提前在全局存储当前页码
    if (pageType === 'prev') {
      targetPage = window.currentPage - 1;
    } else if (pageType === 'next') {
      targetPage = window.currentPage + 1;
    } else {
      targetPage = parseInt(pageType);
    }
    // 发送异步GET请求
    const response = await fetch(`/admin?page=${targetPage}`);
    // 假设服务端返回JSON格式的分页数据
    const result = await response.json();
    // 更新页面内容，比如替换数据列表、更新分页状态
    window.currentPage = targetPage;
    // 这里可根据返回结果操作DOM，实现局部刷新
    // ...
  });
});

内容的提问来源于stack exchange，提问作者Inaara Kalani