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

Question

在我的 Rails 应用程序中，我使用 FullCalendar Rails gem 并尝试使用 jQuery/AJAX 创建用户“预订”。我目前正在我的个人资料显示页面上的脚本标记中处理 fullcalendar 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 发生的事情是将该事件提交给我的预订在我的预订控制器中创建操作。

  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 对象进行包装，所以我必须从那里访问实际的开始和结束时间。如果需要，我仍然对改进代码的领域感兴趣，但至少它正在工作。

Answer 2

我可以在您的代码中看到一些错误。

改变这个：

url: "{<%= profile_bookings_url(@profile) %>}"

通过这个：

url: "<%= profile_bookings_url(@profile) %>"