Javascript ajax调用未达到成功函数

我花了几个小时试图让我的AJAX调用获得成功，但我找不到bug。javascript文件

rooms\u availability.js.erb

，似乎已到达，但已成功传输到表单

当我查看错误的console.log结果时，我看到：

abort: ƒ ( statusText )
always: ƒ ()
complete: ƒ ()
done: ƒ ()
error: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ ( key )
overrideMimeType: ƒ ( type )
pipe: ƒ ( /* fnDone, fnFail, fnProgress */ )
progress: ƒ ()
promise: ƒ ( obj )
readyState: 4
responseText: 
  "var selectList = document.getElementById('reservation_accommodation_id')
  console.log selectList
  function empty() {
    selectList.innerHTML = "";
  }

  empty();

        selectList.insertAdjacentHTML('beforeend', '<optgroup label=Best acco ever>');
            selectList.insertAdjacentHTML('beforeend', '<option value="8">3</option>');
        selectList.insertAdjacentHTML('beforeend', '<optgroup>');
        selectList.insertAdjacentHTML('beforeend', '<optgroup label=Test acco>');
            selectList.insertAdjacentHTML('beforeend', '<option value="16">1</option>');
        selectList.insertAdjacentHTML('beforeend', '<optgroup>');"
setRequestHeader: ƒ ( name, value )
state: ƒ ()
status: 200
statusCode: ƒ ( map )
statusText: "OK"
success: ƒ ()
then: ƒ ( /* fnDone, fnFail, fnProgress */ )
__proto__: Object

中止：ƒ（状态文本）
总是：ƒ（）
完成：ƒ（）
完成：ƒ（）
错误：ƒ（）
失败：ƒ（）
getAllResponseHeaders:ƒ（）
getResponseHeader:ƒ（关键）
覆盖类型：ƒ（类型）
管道：ƒ（/*fnDone，fndfail，fnProgress*/）
进展：ƒ（）
承诺：ƒ（obj）
重新启用日期：4
答复正文：
“var selectList=document.getElementById（'reservation\u accountation\u id'））
console.log选择列表
函数为空（）{
selectList.innerHTML=“”；
}
空（）；
selectList.insertAdjacentHTML（'beforeend'，''）；
selectList.insertAdjacentHTML（'beforeend'，'3'）；
selectList.insertAdjacentHTML（'beforeend'，''）；
selectList.insertAdjacentHTML（'beforeend'，''）；
selectList.insertAdjacentHTML（'beforeend'，'1'）；
selectList.insertAdjacentHTML（'beforeend'，''）
setRequestHeader:ƒ（名称、值）
国家：ƒ（）
现状：200
状态代码：ƒ（地图）
状态文本：“确定”
成功：ƒ（）
然后：ƒ（/*fnDone，fnFail，fnProgress*/）
__原型：对象

代码

预订/new.html.erb

<%= simple_form_for [@hotel, @reservation] do |f|%>
  <div class="col col-sm-3">
    <%= f.input :arrival,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "start_date"} %>
  </div>
  <div class="col col-sm-3">
    <%= f.input :departure,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "end_date"} %>
  </div>

  <div class="col col-sm-4">
    <%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms,  label:false %>
  </div>

  <%= f.button :submit, "Search", class: "create-reservation-btn"%>
<% end %>

<script>
const checkIn = document.querySelector('#start_date');
const checkOut = document.querySelector('#end_date');
const checkInAndOut = [checkIn, checkOut];

checkInAndOut.forEach((item) => {
  item.addEventListener('change', (event) => {
    checkAvailability();
  })
})

  function checkAvailability(){

    $.ajax({
      url: "<%= rooms_availability_hotel_path(@hotel) %>" ,
      dataType: 'json',
      type: "POST",
      data: `arrival=${start_date.value}&departure=${end_date.value}`,
      success: function(data) {
        console.log('succes')
        console.log(data);
      },
      error: function(response) {
        console.log('failure')
        console.log(response);
      }
    });
  };
</script>

预订脚本/new.html.erb

<%= simple_form_for [@hotel, @reservation] do |f|%>
  <div class="col col-sm-3">
    <%= f.input :arrival,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "start_date"} %>
  </div>
  <div class="col col-sm-3">
    <%= f.input :departure,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "end_date"} %>
  </div>

  <div class="col col-sm-4">
    <%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms,  label:false %>
  </div>

  <%= f.button :submit, "Search", class: "create-reservation-btn"%>
<% end %>

<script>
const checkIn = document.querySelector('#start_date');
const checkOut = document.querySelector('#end_date');
const checkInAndOut = [checkIn, checkOut];

checkInAndOut.forEach((item) => {
  item.addEventListener('change', (event) => {
    checkAvailability();
  })
})

  function checkAvailability(){

    $.ajax({
      url: "<%= rooms_availability_hotel_path(@hotel) %>" ,
      dataType: 'json',
      type: "POST",
      data: `arrival=${start_date.value}&departure=${end_date.value}`,
      success: function(data) {
        console.log('succes')
        console.log(data);
      },
      error: function(response) {
        console.log('failure')
        console.log(response);
      }
    });
  };
</script>

const checkIn=document.querySelector（“#开始日期”）；
const checkOut=document.querySelector（'end#u date'）；
const checkInAndOut=[checkIn，checkOut]；
签入日期forEach（（项目）=>{
item.addEventListener（'更改'，（事件）=>{
检查可用性（）；
})
})
功能检查可用性（）{
$.ajax({
url:“”，
数据类型：“json”，
类型：“POST”，
数据：`arrival=${start\u date.value}和离境=${end\u date.value}`，
成功：功能（数据）{
console.log（'succes'）
控制台日志（数据）；
},
错误：函数（响应）{
console.log（'failure'）
控制台日志（响应）；
}
});
};

酒店管理主任

def rooms_availability
  hotel = Hotel.includes(:rooms).find(params[:id])
  arrival = Date.parse room_params[:arrival]
  departure = Date.parse room_params[:departure]
  time_span = arrival..departure
  @unavailable_rooms = Room.joins(:reservations).where(reservations: {hotel: hotel}).where("reservations.arrival <= ? AND ? >= reservations.departure", arrival, departure).distinct
  @hotel_cats = hotel.room_categories
  @hotel_rooms = Room.where(room_category: hotel_cats)
  @rooms = hotel_rooms - @unavailable_rooms
  respond_to do |format|
    format.js
  end
end

def room_params
  params.permit(:arrival, :departure, :format, :id)
end

def房间的可用性
hotel=酒店。包括（：房间）。查找（参数[：id]）
到达=日期。解析房间参数[：到达]
出发=日期。解析房间参数[：出发]
时间=到达..离开
@不可用的房间=房间.连接（：预订）.where（预订：{hotel:hotel}）.where（预订：{hotel:hotel}.reservations=reservations.deposition），到达，离开）.distinct
@hotel_cats=hotel.room_类别
@酒店房间=房间。其中（房间类别：酒店）
@房间=酒店房间-@不可用房间
回应待办事项|格式|
format.js
结束
结束
def房间参数
参数许可证（：到达、离开、格式、id）
结束

酒店/客房\u availability.js.erb

var selectList = document.getElementById('reservation_room_id')

function empty() {
  selectList.innerHTML = "";
}

empty();


    <% unless @rooms.empty? %>
      <% @hotel_cats.each do |cat|%>
        selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
        <% cat.rooms.each do |room|%>
          <% if @rooms.include? room %>
            selectList.insertAdjacentHTML('beforeend', '<option value="<%= room.id %>"><%= room.name %></option>');
          <% end %>
        <% end %>
        selectList.insertAdjacentHTML('beforeend', '<optgroup>');
      <% end %>
    <% end %>

var selectList=document.getElementById（'reservation\u room\u id'））
函数为空（）{
selectList.innerHTML=“”；
}
空（）；
selectList.insertAdjacentHTML（'beforeend'，''）；
selectList.insertAdjacentHTML（'beforeend'，''）；
selectList.insertAdjacentHTML（'beforeend'，''）；

表单html的打印屏幕

<div class="form-group grouped_select optional reservation_room_id">
  <select class="grouped_select optional" name="reservation[room_id]" id="reservation_room_id">
      <option value=""></option>
    <optgroup label="room category 1">
        <option value="6">1</option>
        <option value="7">2</option>
        <option value="8">3</option>
    </optgroup>
    <optgroup label="room category 2">
        <option value="16">1</option>
    </optgroup>
  </select>
</div>

1.
2.
3.
1.

日志

于2019-11-27 15:05:34+0100开始发布“/hotels/22/rooms\u availability”for：：1
由HotelController处理#客房#可用性为JS
参数：{“到达”=>“2019-11-27”，“离开”=>，“id”=>“22”}
用户加载（0.3ms）选择“用户”。*从“用户”中选择“用户”。“id”=用户订购的$1。“id”ASC限额$2[[“id”，2]，“限额”，1]]
↳ /Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/gems/2.5.0/gems/activerecord-5.2.3/lib/active\u record/log\u subscriber.rb:98
酒店负荷（0.2ms）选择“酒店”。*从“酒店”中选择“酒店”。“id”=$1限额$2[[“id”，22]，“限额”，1]]
↳ 应用程序/控制器/酒店/控制器。rb:125
缓存酒店负载（0.0ms）选择“酒店”。*从“酒店”中选择“酒店”。“id”=$1限额$2[[“id”，22]，“限额”，1]]
↳ 应用程序/控制器/酒店/控制器。rb:103
RoomCategory Load（0.2ms）从“room_categories”中选择“room_categories”。*从“room_categories”中选择“room_categories”。“hotel_id”=$1[[“hotel_id”，22]]
↳ 应用程序/控制器/酒店/控制器。rb:103
房间负荷（0.2ms）选择“房间”。*从“房间”中选择“房间”。$1，$2中的“房间类别id”[[“房间类别id”，4]，“房间类别id”，9]]
↳ 应用程序/控制器/酒店/控制器。rb:103
在13毫秒内完成500个内部服务器错误（ActiveRecord:0.9毫秒）
ArgumentError（无效日期）：
app/controllers/hotels_controller.rb:108:in'parse'
app/controllers/hotels\u controller.rb:108:in'rooms\u availability'
开始于2019-11-27 15:05:36+0100发布针对：：1的“/hotels/22/rooms\u availability”
由HotelController处理#客房#可用性为JS
参数：{“到达”=>“2019-11-27”、“离开”=>“2019-11-28”、“id”=>“22”}
用户加载（0.3ms）选择“用户”。*从“用户”中选择“用户”。“id”=用户订购的$1。“id”ASC限额$2[[“id”，2]，“限额”，1]]
↳ /Users/username/.rbenv/versions/2.5.3/lib/ruby/gems/2.5.0/gems/activerecord-5.2.3/lib/active\u record/log\u subscriber.rb:98
酒店负荷（0.3ms）选择“酒店”。*从“酒店”中选择“酒店”。“id”=$1限额$2[[“id”，22]，“限额”，1]]
↳ 应用程序/控制器/酒店/控制器。rb:125
缓存酒店负载（0.0ms）选择“酒店”。*从“酒店”中选择“酒店”。“id”=$1限额$2[[“id”，22]，“限额”，1]]
↳ 应用程序/控制器/酒店/控制器。rb:103
RoomCategory Load（0.3ms）从“RoomCategories”中选择“RoomCategories”。*从“RoomCategories”中选择“RoomCategories”。“HotelID”=$1[[“HotelID”，22]]
↳ 应用程序/控制器/酒店/控制器。rb:103
房间负荷（0.3ms）选择“房间”。*从“房间”中选择“房间”。$1，$2中的“房间类别id”[[“房间类别id”，4]，“房间类别id”，9]]
↳ 应用程序/控制器/酒店/控制器。rb:103
房间负荷（0.4ms）选择“房间