如何通过HTML和Ajax提交数组至PHP并解析name="something[]"用法

嘿，刚接触数组形式的表单输入对吧？别担心，这个用法其实挺直观的，我一步步给你讲清楚，结合你要的Ajax提交场景来梳理。

一、先搞懂name="something[]"到底是什么 #

简单说，当你给多个表单元素设置同一个name属性并加上[]后缀时，浏览器会把这些元素的值打包成一个数组提交给后端。这特别适合处理一组同类型的输入（比如多选的颜色、多个用户信息、批量输入的内容）。

举个HTML例子：

<!-- 一组颜色输入框 -->
<div class="color-group">
  <input type="text" name="favorite_colors[]" placeholder="输入颜色1" value="红色">
  <input type="text" name="favorite_colors[]" placeholder="输入颜色2" value="蓝色">
  <input type="text" name="favorite_colors[]" placeholder="输入颜色3" value="绿色">
</div>

<!-- 普通单个输入 -->
<input type="text" name="username" id="username" placeholder="用户名">

二、PHP里怎么接收这个数组？ #

不管是通过普通表单提交还是Ajax提交，PHP都能直接通过$_POST（或$_GET，看提交方式）拿到这个数组：

// 接收数组，用?? []处理未提交的情况，避免报错
$favoriteColors = $_POST['favorite_colors'] ?? [];
// 接收普通字段
$username = $_POST['username'] ?? '';

// 打印看看数组内容
var_dump($favoriteColors);
// 输出会是：array(3) { [0]=> string(6) "红色" [1]=> string(6) "蓝色" [2]=> string(6) "绿色" }

如果是复选框的情况，name="something[]"只会提交被选中的选项，这是浏览器的默认行为，很实用。

三、结合jQuery Ajax提交的两种方式 #

你需要部分用数组输入、部分用普通输入，通过Ajax传到PHP，这里有两种常用方法：

方法1：直接序列化整个表单（最省心） #

jQuery的serialize()方法会自动识别带[]的输入，把它们转成适合提交的格式：

// 给表单绑定提交事件
$('#your-form').on('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交

  // 序列化表单所有数据（包括数组和普通输入）
  const formData = $(this).serialize();

  // 发送Ajax请求
  $.ajax({
    url: 'your-handler.php', // 你的PHP处理文件地址
    type: 'POST',
    data: formData,
    success: function(response) {
      console.log('提交成功，返回结果：', response);
      // 这里可以处理返回的响应，比如更新页面
    },
    error: function(xhr) {
      console.error('提交失败：', xhr.responseText);
    }
  });
});

方法2：手动构建数据对象（更灵活） #

如果不想序列化整个表单，只想提交部分字段，可以手动收集数组和普通输入的值：

// 收集数组输入的值：把jQuery对象转成普通数组
const favoriteColors = $('input[name="favorite_colors[]"]').map(function() {
  return $(this).val().trim(); // 可以做些简单的清洗
}).get();

// 收集普通输入的值
const username = $('#username').val().trim();

// 发送Ajax请求
$.ajax({
  url: 'your-handler.php',
  type: 'POST',
  data: {
    favorite_colors: favoriteColors,
    username: username
    // 还可以加其他字段
  },
  success: function(response) {
    console.log('提交成功！', response);
  }
});

四、进阶：多维数组输入（可选） #

如果需要更复杂的结构，比如一组用户的姓名和邮箱，可以用多维数组的命名方式：

<div class="user-group">
  <input type="text" name="users[][name]" placeholder="姓名1">
  <input type="email" name="users[][email]" placeholder="邮箱1">
</div>
<div class="user-group">
  <input type="text" name="users[][name]" placeholder="姓名2">
  <input type="email" name="users[][email]" placeholder="邮箱2">
</div>

PHP里接收后，$_POST['users']会是一个二维数组：

$users = $_POST['users'] ?? [];
foreach ($users as $user) {
  echo "姓名：{$user['name']}，邮箱：{$user['email']}<br>";
}

这样整个流程就通啦，不管是数组输入还是普通输入，都能轻松通过Ajax传给PHP处理~

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