如何通过AJAX向Laravel控制器传递数组并保存至数据库

问题描述 #

尝试通过AJAX将数组传递至Laravel控制器并保存到数据库，但服务器返回Object { error: "No data received"}，API状态码为200。以下是原代码：

前端AJAX代码 #

function AddContactData() {
var contactData = [];
var table = document.getElementById('customer_contact'),
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    var data = {
       
        "name": cells[0].childNodes[0].value,
        "designation": cells[1].childNodes[0].value,
        "mobile": cells[2].childNodes[0].value,
        "fixed": cells[3].childNodes[0].value,
        "email": cells[4].childNodes[0].value,
        "remark": cells[5].childNodes[0].value
    };
    contactData.push(data);
}
 var contactDetails = JSON.stringify(contactData);
$.ajax({
    url: '/saveContact',
    type:'POST',
    data: contactDetails,
    headers:{
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
     success: function (response) {
        console.log(response);
    }, error: function (data) {
        console.log(data)
    }
}) 

后端Laravel控制器代码 #

public function addContactDetails(Request $request){
   try{
    $data = json_decode($request->input('contactDetails'), true);
    if(empty($data)){
        return response()->json(['error' => 'No data received']); 
    }
    foreach($data as $key =>$value){
        if(is_array($value)){
            foreach($value as $row){
                DB::table('customer_contacts')->insert([
                    'customer_id' => 1,
                     'contact_person'=>$row['name'],
                     'designation'=>$row['designation'],
                     'mobile'=>$row['mobile'],
                     'fixed'=>$row['fixed'],
                     'email'=>$row['email'],
                     'remarks'=>$row['remark']
                ]);
            }
        }
        return response()->json(["status" => true]);
    }
   }catch(Exception $ex){
    if ($ex instanceof ValidationException) {
        return response()->json(["ValidationException" => ["id" => collect($ex->errors())->keys()[0], "message" => $ex->errors()[collect($ex->errors())->keys()[0]]]]);
    }
    return response()->json(["error" => $ex]);
   }
}

错误原因 #

1. 前端数据传递格式错误：直接发送JSON字符串但未指定contentType: 'application/json'，且未用键名包裹数组，导致Laravel无法识别contactDetails参数。
2. 后端逻辑错误：
   • 尝试从$request->input('contactDetails')获取数据，但前端未传递该键名的参数，导致$data为空。
   • foreach循环内部提前return，仅执行一次循环就返回响应，无法处理所有数据。
   • 多余的嵌套数组判断，$data本身就是联系人对象数组，无需再判断子元素是否为数组。

修改后的代码 #

前端AJAX代码（表单数据格式推荐） #

function AddContactData() {
    var contactData = [];
    var table = document.getElementById('customer_contact'),
        rows = table.getElementsByTagName('tr'),
        i, j, cells;

    for (i = 0, j = rows.length; i < j; ++i) {
        cells = rows[i].getElementsByTagName('td');
        if (!cells.length) {
            continue;
        }
        var data = {
            "name": cells[0].childNodes[0].value,
            "designation": cells[1].childNodes[0].value,
            "mobile": cells[2].childNodes[0].value,
            "fixed": cells[3].childNodes[0].value,
            "email": cells[4].childNodes[0].value,
            "remark": cells[5].childNodes[0].value
        };
        contactData.push(data);
    }

    $.ajax({
        url: '/saveContact',
        type: 'POST',
        data: { contactDetails: contactData }, // 用键名包裹数组，jQuery自动处理序列化
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            console.log(response);
        },
        error: function (data) {
            console.log(data)
        }
    });
}

后端Laravel控制器代码 #

public function addContactDetails(Request $request){
    try{
        // 获取前端传递的contactDetails数组
        $data = $request->input('contactDetails');

        if(empty($data)){
            return response()->json(['error' => 'No data received']); 
        }

        // 遍历每个联系人数据插入数据库
        foreach($data as $row){
            DB::table('customer_contacts')->insert([
                'customer_id' => 1,
                'contact_person'=>$row['name'],
                'designation'=>$row['designation'],
                'mobile'=>$row['mobile'],
                'fixed'=>$row['fixed'],
                'email'=>$row['email'],
                'remarks'=>$row['remark']
            ]);
        }

        // 所有数据处理完成后返回成功响应
        return response()->json(["status" => true]);

    }catch(Exception $ex){
        if ($ex instanceof ValidationException) {
            $firstErrorKey = collect($ex->errors())->keys()[0];
            return response()->json([
                "ValidationException" => [
                    "id" => $firstErrorKey, 
                    "message" => $ex->errors()[$firstErrorKey]
                ]
            ]);
        }
        // 返回具体错误信息而非对象
        return response()->json(["error" => $ex->getMessage()]);
    }
}

可选：JSON格式传递方式 #

如果希望用JSON格式传递数据，前端需修改以下两点：

1. 将数据包裹在键名中并转为JSON字符串：data: JSON.stringify({ contactDetails: contactData })
2. 添加contentType: 'application/json'参数

后端对应修改获取数据的方式：$data = $request->json('contactDetails');

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