不使用Ajax将JavaScript数组传递给Laravel控制器的问题

问题场景 #

尝试通过隐藏表单字段传递多维JavaScript数组到Laravel控制器时，数组被扁平化，丢失了原有的多维结构：

前端JavaScript数组结构 #

0 : (4) ['Name', 'contact_email', 'phone number', 'contact_location']
1 : (5) ['John Doe', 'john.doe@example.com', '15551234567', '"New York', ' NY"']
2 : (5) ['Jane Smith', 'jane.smith@example.com', '15552345678', '"Los Angeles', ' CA"']
3 : (5) ['Robert Johnson', 'robert.johnson@example.com', '15553456789', '"Chicago', ' IL"']
4 : (5) ['Emily Davis', 'emily.davis@example.com', '15554567890', '"Houston', ' TX"']

原表单代码 #

<form id="importContact" action="{{url('reviewContacts')}}" method="post">
    @csrf
    <input type="hidden" id="contacts" name="data">
</form>

原JavaScript提交代码 #

$("#contacts").val('');
$('#contacts').val(dataArray); 
$("#importContact").submit();

控制器接收的扁平化数组 #

Array ( [0] => Name,contact_email,phone number,contact_location,John Doe,john.doe@example.com,15551234567,"New York, NY",Jane Smith,jane.smith@example.com,15552345678,"Los Angeles, CA",Robert Johnson,robert.johnson@example.com,15553456789,"Chicago, IL",Emily Davis,emily.davis@example.com,15554567890,"Houston, TX", )

解决方案 #

方法1：JSON序列化传递（推荐） #

通过将数组转为JSON字符串传递，后端再解析为数组，这是最简洁的方式。

前端修改

使用JSON.stringify()将多维数组转为字符串后赋值给隐藏字段：

$("#contacts").val(JSON.stringify(dataArray)); 
$("#importContact").submit();

Laravel控制器处理

接收参数后用json_decode()解析为多维数组：

public function reviewContacts(Request $request)
{
    // 第二个参数设为true，将JSON对象转为关联数组
    $data = json_decode($request->input('data'), true);
    // 此时$data与前端数组结构完全一致
    dd($data);
}

方法2：利用表单数组命名规则 #

通过动态生成对应数组结构的隐藏字段，让Laravel自动识别为多维数组。

前端修改

移除原单个隐藏字段，动态生成匹配数组结构的隐藏字段：

// 先清理已存在的动态字段
$('#importContact').find('input[name^="data["]').remove();

// 遍历多维数组生成字段
dataArray.forEach((row, rowIndex) => {
    row.forEach((value, colIndex) => {
        $('<input>', {
            type: 'hidden',
            name: `data[${rowIndex}][${colIndex}]`,
            value: value
        }).appendTo('#importContact');
    });
});

// 提交表单
$("#importContact").submit();

Laravel控制器处理

直接接收request()->data即可得到完整多维数组：

public function reviewContacts(Request $request)
{
    $data = $request->input('data');
    // $data结构与前端一致
    dd($data);
}

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