使用jQuery发送Ajax时页面无刷新，a与button标签行为差异问题

先给你拆解核心差异和问题根源：

• 你的<button>标签没指定type属性，浏览器默认会把它识别为type="submit"——这意味着点击它时，除了执行nextPage()发送AJAX请求，还会触发表单的默认提交行为，直接导致页面刷新！
• 而<a>标签这里没设置href属性，它的默认跳转行为本来就不会触发，所以只有AJAX请求执行，页面自然保持不变。

针对button的页面刷新问题，给你两个简单可行的解决办法：

方案1：给button明确指定type="button" #

直接修改button标签，声明它是普通按钮而非提交按钮：

<button type="button" onclick="nextPage()">test</button>

这样浏览器就不会触发表单提交的默认行为，AJAX请求完成后页面也能保持稳定。

方案2：在函数中阻止默认事件 #

如果不想改动button标签，可以在调用函数时传入事件对象，然后在函数里阻止默认行为：

<button onclick="nextPage(event)">test</button>

对应的JS函数修改如下：

function nextPage(e) {
  // 阻止按钮的默认提交行为
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: $('#searchform').attr('action'),
    // 你的其他AJAX配置项...
  });
}

另外你提到“注释掉的代码能正常运行”，大概率那段注释里包含了阻止默认行为的逻辑（比如return false或者preventDefault），所以当时没有触发表单提交，页面也就不会刷新了。

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