如何用JavaScript自动点击超链接实现表单提交后自动跳转？

嘿，我懂你的困扰——POST请求场景下确实没法用header('Location: ...')直接完成跳转，不过自动点击页面生成的链接这个需求其实很好实现，给你几个实用的方案：

方案1：页面DOM加载完成后直接触发点击 #

这是最适配你当前场景的方法，因为你的链接是PHP直接输出到页面里的，等DOM结构完全生成后就能找到它并模拟点击：

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标链接元素
  const autoLink = document.getElementById('autolink');
  // 确保元素存在再执行点击
  if (autoLink) {
    autoLink.click();
  }
});

这个方法不会等图片、样式表这些外部资源加载，只要PHP输出的DOM节点就绪就会执行，刚好匹配你的需求。

方案2：应对动态生成的链接（可选） #

如果后续你的链接变成异步生成的（比如通过AJAX加载后插入DOM），可以用MutationObserver监听DOM变化，一旦链接出现就触发点击：

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function() {
    const autoLink = document.getElementById('autolink');
    if (autoLink) {
      autoLink.click();
      observer.disconnect(); // 找到链接后停止监听，避免重复触发
    }
  });
});

// 监听body下的所有子元素变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

额外优化：提升用户体验 #

可以加个简单的跳转提示，避免用户看到空白页面或突然跳转感到困惑：

document.addEventListener('DOMContentLoaded', function() {
  const autoLink = document.getElementById('autolink');
  if (autoLink) {
    // 创建提示元素
    const jumpTip = document.createElement('p');
    jumpTip.style.cssText = 'color: #666; margin: 20px;';
    jumpTip.textContent = '正在跳转至详情页面...';
    document.body.appendChild(jumpTip);
    
    // 延迟500毫秒再跳转，让用户看到提示
    setTimeout(() => {
      autoLink.click();
    }, 500);
  }
});

另外补充一句：如果你的跳转需要保留POST请求的参数，那点击GET链接可能不满足需求，但从你描述的view...链接来看，应该是查看刚插入的数据，用GET请求是完全合理的~

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