Ajax响应处理异常：FullCalendar数据无法正常解析入数组

核心问题 #

你遇到的问题是Ajax响应的JSON没有被解析为JavaScript对象，而是以原始字符串形式返回。此时response是字符串"[{"name":"luk","start":"2023-11-10"}]"，循环response.length时会遍历字符串的每个字符（长度远大于1），每个字符没有name/start属性，所以推入events的都是{title: undefined, start: undefined}，且次数等于字符串长度。

解决方案 #

方法1：让jQuery自动解析JSON（推荐） #

在Ajax配置中添加dataType: 'json'，告诉jQuery预期返回JSON格式，自动完成解析：

$.ajax({
  url: ajaxurl,
  type: 'POST',
  data: {
    action: 'get_bookings',
  },
  dataType: 'json', // 新增配置
  success: function (response) {
   var events = [];
   for (var i = 0; i < response.length; i++) {
     events.push({
       title: response[i].name,
       start: response[i].start,
     });
   }
   successCallback(events);
  }
});

方法2：手动解析JSON字符串 #

如果无法修改Ajax配置，可在success回调里手动用JSON.parse()解析响应：

success: function (response) {
  // 手动将字符串转为JSON对象
  var data = JSON.parse(response);
  var events = [];
  for (var i = 0; i < data.length; i++) {
    events.push({
      title: data[i].name,
      start: data[i].start,
    });
  }
  successCallback(events);
}

方法3：PHP端输出正确的响应头 #

在PHP的echo json_encode($bookings);之前添加Content-Type头，让浏览器自动识别JSON格式，jQuery也会自动解析：

header('Content-Type: application/json'); // 新增响应头
echo json_encode($bookings);

验证小技巧 #

可以在success回调里先打印console.log(typeof response)，如果输出string说明没解析，输出object说明解析成功。

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