点击添加/删除按钮跳转至展示页问题：需在索引页完成操作

要实现点击添加/删除按钮时在当前页面完成操作、不跳转至展示页，核心是用异步请求替代默认的页面跳转提交，同时阻止按钮的默认行为，步骤如下：

1. 阻止默认跳转行为 #

给添加/删除按钮或对应表单绑定点击/提交事件，用event.preventDefault()拦截浏览器默认的页面跳转动作。

2. 异步提交请求 #

使用fetch API（或jQuery的$.ajax）向后端发送添加/删除请求，无需刷新页面。

示例代码（添加+删除操作） #

HTML部分（索引页的表单与列表）

<form id="addForm">
  <input type="text" name="content" placeholder="输入内容">
  <button type="submit">添加</button>
</form>
<ul id="itemList">
  <!-- 现有列表项示例 -->
  <li>
    测试内容
    <button class="deleteBtn" data-id="1">删除</button>
  </li>
</ul>

JavaScript部分

// 处理添加操作
document.getElementById('addForm').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止表单默认跳转
  const formData = new FormData(this);
  
  try {
    const res = await fetch('/api/add-item', {
      method: 'POST',
      body: formData
    });
    
    if (res.ok) {
      const newItem = await res.json();
      // 局部更新页面，插入新列表项
      const newLi = document.createElement('li');
      newLi.textContent = newItem.content;
      const deleteBtn = document.createElement('button');
      deleteBtn.className = 'deleteBtn';
      deleteBtn.dataset.id = newItem.id;
      deleteBtn.textContent = '删除';
      deleteBtn.addEventListener('click', handleDelete);
      newLi.appendChild(deleteBtn);
      document.getElementById('itemList').appendChild(newLi);
      this.reset(); // 清空表单
    }
  } catch (err) {
    console.error('添加失败:', err);
  }
});

// 处理删除操作
async function handleDelete(e) {
  const itemId = e.target.dataset.id;
  try {
    const res = await fetch(`/api/delete-item/${itemId}`, {
      method: 'DELETE'
    });
    
    if (res.ok) {
      // 局部删除对应列表项
      e.target.parentElement.remove();
    }
  } catch (err) {
    console.error('删除失败:', err);
  }
}

// 给现有删除按钮绑定事件
document.querySelectorAll('.deleteBtn').forEach(btn => {
  btn.addEventListener('click', handleDelete);
});

3. 后端配合 #

确保后端接口返回JSON格式的响应，不需要重定向到展示页，仅返回操作结果（比如新添加项的信息、删除成功的状态码）。

内容的提问来源于stack exchange，提问作者Eren Avar