使用Ajax传递数据时如何阻止页面完全刷新？

看来你已经搞定了Ajax传值的部分，但页面刷新的问题确实挺烦人的。核心原因是表单的默认提交行为没被阻止——哪怕你用了Ajax，只要表单触发了提交，浏览器就会默认刷新页面。下面给你几个简单有效的解决办法：

方法1：给表单添加阻止提交的逻辑 #

直接在表单标签上加上onsubmit="return false;"，这样不管什么情况触发表单提交，都会被拦截：

<form class="choose-form form-holder" onsubmit="return false;">
  <select id="usertype" onChange="selectChange()">
    <option value="1">JS</option>
    <option value="2">JP</option>
    <!-- 你的其他选项 -->
  </select>
</form>

方法2：在selectChange函数里阻止默认事件 #

把事件对象传到函数里，调用preventDefault()来阻止可能的默认行为，同时确保你的Ajax逻辑没问题：

function selectChange(event) {
  // 先阻止默认行为，避免页面刷新
  event.preventDefault();

  // 获取选中的值
  const userType = document.getElementById('usertype').value;

  // 这里写你的Ajax请求（示例用fetch，你也可以用jQuery的ajax或者XMLHttpRequest）
  fetch('你的PHP处理文件路径', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `usertype=${userType}`
  })
  .then(response => response.text()) // 或者response.json()，看你的PHP返回格式
  .then(data => {
    // 拿到返回数据后，更新你的视图页面内容
    // 比如：document.getElementById('target-view').innerHTML = data;
    console.log('数据提交成功，返回内容：', data);
  })
  .catch(error => {
    console.error('请求出错了：', error);
  });
}

对应的HTML要把事件参数传进去：

<select id="usertype" onChange="selectChange(event)">

方法3：如果不需要表单，直接去掉表单标签 #

如果你的下拉框只是用来选择值，不需要表单的其他功能（比如多字段提交），直接把<form>换成普通的容器标签，彻底避免表单提交的问题：

<div class="choose-form form-holder">
  <select id="usertype" onChange="selectChange()">
    <option value="1">JS</option>
    <option value="2">JP</option>
    <!-- 你的其他选项 -->
  </select>
</div>

最后提醒一下：尽量不要用Ajax的同步请求（async: false），同步请求会阻塞浏览器，也可能导致页面异常刷新。保持请求异步就好。

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