Ajax，Jquery将数据从数据库传递到其他功能

Question

我制作了数据透视表“save_events”和控制器“颜色”。在控制器中进行查询并将其发送到 Ajax。然后我得到 events_id （它是我的数据透视表中的一列）并使用 console.log(JSONObject.eventColored[0].events_id);检查 id 事件及其工作正常。但我需要将它传递给必须更改背景颜色事件的其他函数。而且我不知道该怎么做。

<script src="{{ asset('js/fullcalendar') }}/fullcalendar.js"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
<script type="text/javascript">

$(document).ready(function() {

var base_url = '{{ url('/') }}'; 
$.ajax(
  {    
        type: "GET",
        url: "{!!route('color')!!}",             
        dataType: "json",
        data:{"events_id": '' },                 
        success: function(data)
        {
          var JSONString=data;
                //var JSONObject = JSON.parse(JSON.stringify(data));
                //console.log(data);      
                console.log(data.eventColored[0].events_id);
              var color_events=data.eventColored[0].events_id;

                  $('#bootstrapModalFullCalendar').fullCalendar({
  weekends: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek'
  },
   eventClick: function(event, jsEvent, view) {
      $('#modalTitle').html(event.title);
      $('#modalBody').html(event.name);
      $('#eventUrl').attr('href','/home/zapis/'+event.id);
      $("#startTime").html(moment(event.start).format('HH:mm '));
      if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
      else $("#endTime").html('');					    
      $('#fullCalModal').modal();
      return false;
    },

  eventLimit: true,
  FirstDay: 1,
        contentheight : 650,
        editable : true,
        allDay : false,
        aspectRatio : 2,
        slotLabelFormat : 'HH:mm:ss',
        timeFormat : 'HH:mm',
        displayEventEnd : true,
        events: {
    url: base_url + '/api',
    error: function() {
      alert("cannot load json");
    }
  },
   eventColor: 'white',

  eventAfterRender: function (event, element, view, color_events) {
  if(event.id==color_events){
    element.css('background-color', '#cccccc');											
  }
    else
    {
      if (event.title == "Wydzial 1") 
      {
          element.css('background-color', '#378006');
          }
          else if(event.title == "Wydzial 2")
          {
          element.css('background-color', '#ff0000');	
          }
          else if(event.title == "Wydzial 3")
          {
          element.css('background-color', '#73e600');	
          }
          else{
          element.css('background-color', '#0066ff');
          }
        }
  }

});

  }

});

});

</script>

此时我的问题是：在 Ajax 中，我得到了 JSONObject.eventColored[0].events_id，但我无法在 eventAfterRender: function (event, element, view) 中使用它 我收到了这个错误：

jQuery.Deferred exception: JSONObject is not defined .eventAfterRender@http://localhost:8000/home:206:1

和控制器（我所做的项目是使用 Laravel 5.4）：

class Color extends Controller
{
    public function colorEvent()
    {
        $eventColored =  DB::table('save_events')->get(['users_id','events_id']);

        return response()->json(['eventColored'=>$eventColored])->$eventColored = array('eventColored' => $eventColored );

    }
}

循环：

eventAfterRender: function (event, element, view) {
  var color_events = [];
  for (i = 0; i < data.eventColored.length; i++) {					
    color_events.push(data.eventColored[i].events_id);		
  };


  console.log(color_events);
  console.log(event.id);
if(color_events==event.id){

        element.css('background-color', '#cccccc');

}

  else
  {
    if (event.title == "Wydzial 1") 
    {
        element.css('background-color', '#378006');
        }
        else if(event.title == "Wydzial 2")
        {
        element.css('background-color', '#ff0000');	
        }
        else if(event.title == "Wydzial 3")
        {
        element.css('background-color', '#73e600');	
        }
        else{
        element.css('background-color', '#0066ff');
        }

      }
}

控制台

Array [ 8, 9, 7 ]  home:242:5
1  home:243:5
Array [ 8, 9, 7 ]  home:242:5
5  home:243:5
Array [ 8, 9, 7 ]  home:242:5
6  home:243:5
Array [ 8, 9, 7 ]  home:242:5
7  home:243:5
Array [ 8, 9, 7 ]  home:242:5
8  home:243:5
Array [ 8, 9, 7 ]  home:242:5
9  home:243:5
Array [ 8, 9, 7 ]  home:242:5
10

好的，我试着解释一下。 Fullcalendar 获取 1 个名为“Events”的表，其中包含用户可以查看主页的所有事件。接下来认为用户可以做的是点击事件并加入它，然后它在数据透视表“save_events”

Answer 1

这就是问题所在：

 eventAfterRender: function (event, element, view, color_events) {

看看eventAfterRender的定义。 https://fullcalendar.io/docs/event_rendering/eventAfterRender/。回调中没有color_events这样的参数变量。您不能只是发明自己的回调参数 - 不会填充任何内容，因为 fullCalendar 不知道它们。

您在代码的较高位置声明var color_events，这是正确的，但是您在 eventAfterRender 函数的回调参数中声明另一个 color_events 意味着在范围内声明了一个新的、单独的 color_events 变量函数，而您之前声明的范围更广的color_events 将被暂时忽略。

要修复它，只需从回调签名中删除虚构的color_events 参数：

eventAfterRender: function (event, element, view) {

现在，之前声明的color_events 版本将在范围内并具有正确的值。

如果您不确定为什么会这样，请阅读有关 JavaScript 变量作用域的教程。

关于你的循环：

1) 第一个错误是data 不是一个数组，它是一个对象。所以你没有必要在上面做.each()，因为你知道对象的属性名并且你已经知道你对event_colored 属性感兴趣。 event_colored is 虽然是一个数组 - 因此您已经可以使用 event_colored[0] 来获取它的第一个元素。所以你想成为循环的主题是 event_colored - 你的内部循环已经这样做了，使用传统的 JS 语法而不是 jQuery，但这没有区别。

2) 每次运行 color_event = [(data.eventColored[i].events_id)]; 时，它都会用包含最新事件 ID 的新数组覆盖 color_event 变量。将项目添加到数组的正确方法是使用.push() 方法。在 JS 数组上快速谷歌搜索会告诉你这一点。

我假设您想将来自 eventColored 的所有 ID 与 fullCalendar 中的事件 ID 进行比较？如果是这样，最快的方法如下。你已经有一个数组 (data.event_colored)，它在 eventAfterRender 方法的范围内，所以直接在那里使用它，而不是尝试创建第二个数组：

eventAfterRender: function (event, element, view) {
  for (i = 0; i < data.eventColored.length; i++) {
    if (event.id == data.eventColored[i].events_id) {
     element.css('background-color', '#cccccc');        
    }
    else
    {
      //..etc
    }
  }
}