javascript - 如何将动态路由传递给 Rails 中的 AJAX POST 请求

Question

在我的 Rails 应用程序中，我使用了 FullCalendar Rails gem并尝试使用 jQuery/AJAX 创建用户“预订”。我目前正在个人资料显示页面上的脚本标签中处理全日历 javascript，因为我不确定如何访问 erb 文件之外的动态路由。不幸的是，我的 AJAX 似乎根本不起作用。选择功能仍然正常运行，但 AJAX 似乎没有任何反应，因为我没有收到成功或失败消息，网络选项卡中也没有显示任何内容。我猜我没有正确设置 url 路由，我还假设我对 AJAX 的一般设置可能不正确。更新:当我提交一个显示在 fullcalendar javascript 文件本身中的事件时，我现在实际上遇到了一个控制台错误:'Uncaught TypeError: Cannot read property '_calendar' of undefined'。我不太确定那是从哪里来的，而且 ajax 请求在我的网络选项卡中仍然没有显示任何内容。

<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-01-12',
        selectable: true,
        selectHelper: true,

        select: function(start, end) {
        var title = "Unavailable";
        var eventData;
            eventData = {
                title: title,
                start: start,
                end: end,
                color: 'grey'
                };
        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
        $('#calendar').fullCalendar('unselect');

        $.ajax({
         method: "POST",
         data: {start_time: start, end_time: end, first_name: title, color: 'grey'},
         url: "<%= profile_bookings_url(@profile) %>",
         success: function(data){
           console.log(data);
         },
         error: function(data){
          alert("something went wrong, refersh and try again")
         }
       })

        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: window.location.href + '.json'
    });
});

上面的 select 函数使用 jQuery 向日历添加了一个事件。我希望我的 AJAX 发生的事情是将该事件提交到我的预订 Controller 中的预订创建操作。

  def create
   @profile = Profile.friendly.find(params[:profile_id])
   @booking = @profile.bookings.new(booking_params)
   if @booking.save
    flash[:notice] = "Sending your booking request now."
    @booking.notify_host
    redirect_to profile_booking_path(@profile, @booking)
   else
    flash[:alert] = "See Errors Below"
    render "/profiles/show"
   end
  end

谁能帮我解决 AJAX 调用问题？我之前没有真正使用过它，所以非常感谢任何帮助!如果我应该发布任何其他信息/代码，请告诉我。

Answer 1

我最终解决了这个问题。它与我的数据格式有关:我的 ajax 调用的元素。工作代码:

<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-01-12',
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
    var title = "Unavailable";
            var eventData;
                eventData = {
                    title: title,
                    start: start,
                    end: end,
        color: 'grey'
                };
      $.ajax({
        method: "POST",
        data: {booking:{start_time: start._d, end_time: end._d, first_name: title}},
        url: "<%= profile_bookings_path(@profile, @booking) %>",
        success: function(data){
          console.log(data);
          $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
          $('#calendar').fullCalendar('unselect');
        },
        error: function(data){
          alert("something went wrong, refersh and try again")
        }
      });
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: window.location.href + '.json'
    });
});

它必须用预订对象包裹，我的开始和结束时间是 moment.js 对象，所以我必须从那里访问实际的开始和结束时间。如果需要，我仍然对改进代码的地方感兴趣，但至少它在工作。