javascript - Ajax、Jquery 将数据从数据库传递到其他函数

Question

我制作数据透视表“save_events”和 Controller “color”。在 Controller 中进行查询并将其发送到 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

和 Controller (我所做的项目是使用 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”中创建新记录 << 有 2 列 users_id 和 events_id，该数据透视表是根据表“Users”和“Events”之间的关系创建的”。全日历上的事件根据标题有不同的颜色，例如如果标题名称为“Wydzial 1”，颜色为红色，否则标题将为“wydzial 2”，颜色为蓝色，否则标题将为“wydzial 3”，颜色为绿色，否则标题将为“wydzial 4”，颜色为黄色。如果用户加入到事件，我想做一些类似的事情，例如标题为“wydzial 1”的事件得到红色，当用户单击它并加入到此事件时，它将改变颜色为灰色。我写了一篇文章链接到github，那里是我的项目。因此，在完成日历时，会显示主持人(用户 Angular 色之一)创建的所有事件，并且用户可以加入(接受、保存)事件，如果有人加入事件，它将自动将背景颜色更改为灰色。

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 是一个数组 - 因此您可以执行 event_colored[0] 来获取它的第一个元素。因此，您希望将 event_colored 作为循环的主题 - 您的内部循环已经执行此操作，使用传统的 JS 语法而不是 jQuery，但这没有什么区别。

2) 每次运行 color_event = [(data.eventColored[i].events_id)]; 时，它都会用包含以下内容的新数组覆盖 color_event 变量:最新事件 ID。将项目添加到数组的正确方法是使用 .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
    }
  }
}