使用jQuery和Ajax提交包含数组命名元素的HTML表单

<form id="invite-form" method="post" action="">
    <p>朋友 1:</p>
    <input type="text" name="friends[0][first_name]" placeholder="姓氏" />
    <input type="text" name="friends[0][last_name]" placeholder="名字" />
    <input type="email" name="friends[0][email]" placeholder="邮箱" />

    <p>朋友 2:</p>
    <input type="text" name="friends[1][first_name]" placeholder="姓氏" />
    <input type="text" name="friends[1][last_name]" placeholder="名字" />
    <input type="email" name="friends[1][email]" placeholder="邮箱" />

    <p>朋友 3:</p>
    <input type="text" name="friends[2][first_name]" placeholder="姓氏" />
    <input type="text" name="friends[2][last_name]" placeholder="名字" />
    <input type="email" name="friends[2][email]" placeholder="邮箱" />

    <input type="submit" value="邀请" />
</form>

jQuery(document).ready(function() {
    // 监听表单的提交事件
    jQuery("#invite-form").submit(function(e) {
        // 阻止表单的默认提交行为，防止页面刷新
        e.preventDefault();

        // 使用 serialize() 方法将表单数据序列化为 URL 编码字符串
        let formData = jQuery(this).serialize();

        // 可以在 formData 中添加额外的数据，例如一个 action 参数
        // 注意：如果 formData 是字符串，添加额外参数需要手动拼接
        // 例如：formData += '&action=invite-friends';
        // 或者，如果需要更复杂的结构，可以先转为对象再序列化
        // let formObject = jQuery(this).serializeArray().reduce(function(obj, item) {
        //     obj[item.name] = item.value;
        //     return obj;
        // }, {});
        // formObject['action'] = 'invite-friends';
        // formData = jQuery.param(formObject); // 使用 jQuery.param 再次序列化对象

        console.log("提交的数据:", formData); // 打印序列化后的数据，例如：friends%5B0%5D%5Bfirst_name%5D=...

        // 发送 Ajax 请求
        jQuery.ajax({
            type: "POST", // 使用 POST 方法，适合表单提交
            url: 'invitation.php', // 服务器端处理脚本的 URL
            data: formData, // 将序列化后的数据作为请求体发送
            dataType: 'json', // 预期服务器返回的数据类型为 JSON
            cache: false, // 禁用浏览器缓存
            success: function(response) {
                // 请求成功时的回调函数
                console.log("服务器响应:", response);
                if (response.success === true) {
                    alert("邀请成功！");
                    // 可以在这里处理成功后的UI更新
                } else {
                    alert("邀请失败: " + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 请求失败时的回调函数
                console.error("Ajax 请求失败:", textStatus, errorThrown);
                alert("请求失败，请稍后再试。");
            }
        });
    });
});

<?php
header('Content-Type: application/json'); // 设置响应头为 JSON

$response = ['success' => false, 'message' => '未知错误'];

// 检查是否是 POST 请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 检查 $_POST['friends'] 是否存在且为数组
    if (isset($_POST['friends']) && is_array($_POST['friends'])) {
        $friends = $_POST['friends'];

        // 遍历并打印接收到的朋友数据
        echo "<h2>接收到的朋友数据:</h2>";
        foreach ($friends as $index => $friend) {
            echo "<p>朋友 " . ($index + 1) . ":</p>";
            echo "<ul>";
            echo "<li>姓氏: " . htmlspecialchars($friend['first_name'] ?? 'N/A') . "</li>";
            echo "<li>名字: " . htmlspecialchars($friend['last_name'] ?? 'N/A') . "</li>";
            echo "<li>邮箱: " . htmlspecialchars($friend['email'] ?? 'N/A') . "</li>";
            echo "</ul>";
        }

        // 模拟处理成功
        $response = ['success' => true, 'message' => '朋友列表已成功接收并处理。'];
    } else {
        $response['message'] = '未接收到朋友数据或数据格式不正确。';
    }

    // 模拟接收额外的 action 参数
    if (isset($_POST['action'])) {
        // echo "<p>接收到 action: " . htmlspecialchars($_POST['action']) . "</p>";
    }

} else {
    $response['message'] = '只接受 POST 请求。';
}

echo json_encode($response); // 返回 JSON 响应
?>

$_POST = [
    'friends' => [
        0 => [
            'first_name' => 'John',
            'last_name' => 'Doe',
            'email' => 'john.doe@example.com'
        ],
        1 => [
            'first_name' => 'Jane',
            'last_name' => 'Smith',
            'email' => 'jane.smith@example.com'
        ],
        // ... 更多朋友数据
    ]
];