求助：基于jQuery+PHP实现无刷新获取多选框选中值的教程

嘿，我来帮你搞定无刷新获取复选框值的需求！你的现有代码是通过表单提交刷新页面来获取值，要实现无刷新效果，我们可以用**AJAX（异步JavaScript和XML）**来完成，下面是具体的实现步骤：

1. 调整前端HTML结构 #

先把表单的提交按钮改成普通按钮（也可以保留submit按钮，但要阻止它的默认刷新行为），同时新增一个用来展示结果的容器：

<form id="checkboxForm" action="#" method="post">
  <input type="checkbox" name="check_list[]" value="C/C++"><label>C/C++</label><br/>
  <input type="checkbox" name="check_list[]" value="Java"><label>Java</label><br/>
  <input type="checkbox" name="check_list[]" value="PHP"><label>PHP</label><br/>
  <button type="button" id="submitBtn">Submit</button>
</form>
<!-- 用来显示无刷新返回的结果 -->
<div id="result"></div>

2. 编写原生JavaScript实现AJAX请求 #

添加一段JS代码，监听按钮点击事件，收集选中的复选框值，然后异步发送到后端处理：

document.getElementById('submitBtn').addEventListener('click', function() {
  // 获取所有选中的复选框元素
  const checkedBoxes = document.querySelectorAll('input[name="check_list[]"]:checked');
  // 把选中的复选框值转换成数组
  const selectedValues = Array.from(checkedBoxes).map(box => box.value);

  // 创建FormData对象，用来包装要传递的数据
  const formData = new FormData();
  // 把选中的值逐个添加到FormData，后端可以像之前一样用$_POST['check_list']获取
  selectedValues.forEach(value => {
    formData.append('check_list[]', value);
  });

  // 用fetch发送异步POST请求
  fetch('handle-checkbox.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    // 把后端返回的结果渲染到页面上
    document.getElementById('result').innerHTML = data;
  })
  .catch(error => {
    console.error('请求出错:', error);
    document.getElementById('result').innerHTML = '获取数据失败，请重试';
  });
});

3. 编写后端处理脚本（handle-checkbox.php） #

把你原来的PHP处理逻辑单独放到一个文件里，专门用来处理AJAX请求并返回结果：

<?php
if(!empty($_POST['check_list'])){
  // 遍历选中的值并拼接成返回内容
  $result = '';
  foreach($_POST['check_list'] as $selected){
    $result .= $selected."</br>";
  }
  echo $result;
} else {
  echo '请至少选择一个选项';
}
?>

额外简化方案：用jQuery实现（如果你已经引入jQuery） #

如果你的项目里已经用了jQuery，代码可以更简洁：

$('#submitBtn').click(function() {
  // 收集选中的复选框值
  const selectedValues = $('input[name="check_list[]"]:checked').map(function() {
    return $(this).val();
  }).get();

  // 发送异步POST请求并处理结果
  $.post('handle-checkbox.php', { check_list: selectedValues }, function(data) {
    $('#result').html(data);
  }).fail(function() {
    $('#result').html('获取数据失败，请重试');
  });
});

这样修改后，点击按钮就不会刷新页面，而是异步获取并显示选中的复选框值啦～

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