如何在onclick事件中先发送POST请求再跳转至指定页面？

你之前在按钮里嵌套<a>标签的做法会导致浏览器优先触发页面跳转，要么跳过POST请求的执行，要么请求还没完成就被中断——这是因为<a>的导航行为优先级高于按钮的onclick事件，而且POST请求属于异步操作，不会阻塞页面跳转。

下面是几种可靠的解决方案：

方案1：在POST请求完成后执行跳转 #

修改你的sendPOST函数，把页面跳转逻辑放在请求成功（或完成）的回调里，确保POST请求完全处理后再跳转。

示例（Fetch API）：

function sendPOST() {
  // 替换成你的实际接口地址
  fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    // 这里传入下拉菜单选中的值，替换成你的下拉菜单ID
    body: JSON.stringify({
      selected: document.getElementById('your-select').value
    })
  })
  .then(response => {
    // 可选：验证请求是否成功
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(() => {
    // 请求完成后跳转到目标页面
    window.location.href = './class.html';
  })
  .catch(err => {
    console.error('POST请求出错:', err);
    // 可选：请求失败时提示用户，比如alert('提交失败，请重试')
  });
}

按钮代码保持简洁，不要嵌套<a>：

<button onclick="sendPOST();" class="btn btn-secondary">Submit</button>
<div id="content">

示例（XMLHttpRequest）：

如果项目使用传统的XMLHttpRequest，写法如下：

function sendPOST() {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit');
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功后跳转
      window.location.href = './class.html';
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  };
  
  xhr.onerror = function() {
    console.error('网络请求错误');
  };
  
  xhr.send(JSON.stringify({
    selected: document.getElementById('your-select').value
  }));
}

方案2：用表单提交实现（可选） #

如果不需要手动写AJAX逻辑，也可以用HTML表单配合处理函数：

<form action="/api/submit" method="POST" onsubmit="handleSubmit(event)">
  <select id="your-select" name="selected">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
  </select>
  <button type="submit" class="btn btn-secondary">Submit</button>
</form>

对应的处理函数：

function handleSubmit(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const form = event.target;
  const formData = new FormData(form);
  
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(res => res.ok && (window.location.href = './class.html'))
  .catch(err => console.error('提交出错:', err));
}

重要提醒 #

• 绝对不要在<button>里嵌套<a>标签，这违反HTML语义规范，必然导致交互冲突。
• 跳转逻辑必须放在异步请求的回调中，否则AJAX请求还没完成，页面就已经跳转了，POST请求会被中断。

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