You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel 6+Semantic UI AJAX提交表单数组结构异常问题

问题分析与解决方案

这个问题的核心是Semantic UI的form('get values')方法对嵌套数组格式的表单name属性解析逻辑有缺陷,它没有正确识别Laravel期望的array[key][subkey]结构,反而把schedules[1]当成了一个不完整的键名(即schedules[1),导致后端收到的数组结构不符合预期。

下面提供几种靠谱的解决办法:

方法1:改用jQuery原生的表单序列化(推荐)

放弃使用Semantic UI的form('get values'),直接用jQuery的serialize()或serializeArray()来处理表单数据,这两种方法能正确解析嵌套数组格式的name属性,Laravel也能直接识别:

$.ajax({
  url: "...",
  data: $(formClass).serialize(), // 直接序列化表单
  type: 'POST',
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 别忘了Laravel的CSRF令牌
  },
  success: function (response) {
    // 你的处理逻辑
  }
});

此时在控制器中,直接通过$request->input('schedules')就能拿到正确的结构:

// 输出示例
array:1 [
  1 => array:3 [
    "realTime" => "12:00:00"
    "delayTime" => "13:00:00"
    "deathTime" => "14:00:00"
  ]
]

方法2:手动修复Semantic UI返回的数据结构

如果一定要保留Semantic UI的form('get values')方法,可以手动遍历返回的原始数据,拆分重组键名,修复嵌套数组结构:

// 获取Semantic UI返回的原始数据
let rawFormData = $(formClass).form('get values');
let fixedFormData = {};

// 遍历原始数据,解析嵌套键名
$.each(rawFormData, function(rawKey, value) {
  // 匹配类似 "schedules[1][realTime]" 的键名格式
  let keyPattern = /^(\w+)\[(\d+)\]\[(\w+)\]$/;
  let matchResult = rawKey.match(keyPattern);
  
  if (matchResult) {
    let mainKey = matchResult[1]; // "schedules"
    let serviceId = matchResult[2]; // "1"
    let fieldKey = matchResult[3]; // "realTime"
    
    // 逐层创建嵌套数组
    if (!fixedFormData[mainKey]) fixedFormData[mainKey] = {};
    if (!fixedFormData[mainKey][serviceId]) fixedFormData[mainKey][serviceId] = {};
    fixedFormData[mainKey][serviceId][fieldKey] = value;
  } else {
    // 非嵌套字段直接赋值
    fixedFormData[rawKey] = value;
  }
});

// 提交修复后的数据
$.ajax({
  url: "...",
  data: { formData: fixedFormData },
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function (response) {
    // 你的处理逻辑
  }
});

方法3:临时Hack(不推荐)

你发现的在name属性中多加一个闭合括号schedules][{{ $service->id_service }}][realTime]确实能临时解决问题,但这不符合标准HTML表单的命名规范,可能在后续的表单验证、其他JS库交互中出现意外问题,所以不建议长期使用。


内容的提问来源于stack exchange,提问作者Frey Stroud

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.06 11:27:53