使用Ajax防止无名称表单提交后页面刷新（jQuery实现）

没问题，我来帮你搞定这个需求——让下拉列表选完选项后不再刷新整个页面，用Ajax异步提交数据就行，分三步来操作：

第一步：调整HTML结构 #

先把select标签上的onchange="this.form.submit()"删掉，避免触发默认的表单提交刷新行为：

<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
  <div id="select">
    <select name="gebiet1">
      <?php 
        $gebietausgabe = mysqli_query($db, "SELECT DISTINCT Gebiet FROM kernfragen"); 
        while ($row = $gebietausgabe->fetch_assoc()) { 
          echo '<option value="' . $row['Gebiet'] . '">' . $row['Gebiet'] . '</option>'; 
        } 
      ?>
    </select>
  </div>
</form>
<!-- 可选：加个容器用来展示服务器返回的结果 -->
<div id="result-box"></div>

第二步：编写jQuery Ajax脚本 #

添加一段jQuery代码，监听下拉框的change事件，异步发送选中值并处理返回结果：

$(document).ready(function() {
  // 绑定下拉框的change事件
  $('select[name="gebiet1"]').on('change', function(e) {
    // 阻止默认提交行为（双重保险）
    e.preventDefault();
    
    // 获取选中的选项值
    var selectedValue = $(this).val();
    
    // 发送Ajax请求
    $.ajax({
      url: '<?php echo $_SERVER['PHP_SELF']; ?>', // 提交到当前PHP页面
      type: 'POST',
      data: { gebiet1: selectedValue }, // 提交的数据，和表单name对应
      success: function(response) {
        // 请求成功：把返回内容展示到结果容器里
        $('#result-box').html(response);
        // 如果只是处理后台逻辑不需要展示内容，这里可以改成提示，比如 alert('操作完成！')
      },
      error: function() {
        // 请求失败的提示
        alert('提交失败，请稍后重试~');
      }
    });
  });
});

第三步：处理PHP后台逻辑 #

在当前PHP页面的合适位置（比如顶部）添加POST请求的处理代码：

<?php
// 假设你的数据库连接代码已经在这里
if(isset($_POST['gebiet1'])) {
  $selectedGebiet = $_POST['gebiet1'];
  // 这里写你的业务逻辑，比如根据选中值查询数据
  // 输出要返回给前端的内容，比如HTML片段或文本
  echo '你选择的区域是：' . htmlspecialchars($selectedGebiet);
  // 如果不需要返回内容，直接exit();即可
  exit();
}
// 下面是原页面的HTML输出部分
?>

关键点说明 #

• 用$.ajax替代默认表单提交，实现异步请求，页面全程不刷新
• $(document).ready()确保DOM加载完成后再绑定事件，避免找不到元素
• htmlspecialchars()用来防止XSS攻击，处理用户输入一定要注意安全
• 你的jQuery版本是1.8.3，on()方法完全兼容（1.7+就支持），不用担心兼容性问题

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