在AJAX調用中處理數據類型

Question

我試圖花費幾個小時來獲得成功的AJAX調用，但錯誤似乎出在AJAX調用期望/我發送的dataType中（JS與JSON）。 不幸的是，我不知道該如何解決。

當我查看錯誤的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

碼

Reservations / 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 %>

Reservations / new.html.erb的腳本

<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>

hotels_controller

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

hotels / rooms_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 %>

表單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>

日志

Started POST "/hotels/22/rooms_availability" for ::1 at 2019-11-27 15:05:34 +0100
Processing by HotelsController#rooms_availability as JS
  Parameters: {"arrival"=>"2019-11-27", "departure"=>"", "id"=>"22"}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
  ↳ /Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/gems/2.5.0/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
  Hotel Load (0.2ms)  SELECT  "hotels".* FROM "hotels" WHERE "hotels"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ app/controllers/hotels_controller.rb:125
  CACHE Hotel Load (0.0ms)  SELECT  "hotels".* FROM "hotels" WHERE "hotels"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ app/controllers/hotels_controller.rb:103
  RoomCategory Load (0.2ms)  SELECT "room_categories".* FROM "room_categories" WHERE "room_categories"."hotel_id" = $1  [["hotel_id", 22]]
  ↳ app/controllers/hotels_controller.rb:103
  Room Load (0.2ms)  SELECT "rooms".* FROM "rooms" WHERE "rooms"."room_category_id" IN ($1, $2)  [["room_category_id", 4], ["room_category_id", 9]]
  ↳ app/controllers/hotels_controller.rb:103
Completed 500 Internal Server Error in 13ms (ActiveRecord: 0.9ms)



ArgumentError (invalid date):

app/controllers/hotels_controller.rb:108:in `parse'
app/controllers/hotels_controller.rb:108:in `rooms_availability'
Started POST "/hotels/22/rooms_availability" for ::1 at 2019-11-27 15:05:36 +0100
Processing by HotelsController#rooms_availability as JS
  Parameters: {"arrival"=>"2019-11-27", "departure"=>"2019-11-28", "id"=>"22"}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
  ↳ /Users/username/.rbenv/versions/2.5.3/lib/ruby/gems/2.5.0/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
  Hotel Load (0.3ms)  SELECT  "hotels".* FROM "hotels" WHERE "hotels"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ app/controllers/hotels_controller.rb:125
  CACHE Hotel Load (0.0ms)  SELECT  "hotels".* FROM "hotels" WHERE "hotels"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ app/controllers/hotels_controller.rb:103
  RoomCategory Load (0.3ms)  SELECT "room_categories".* FROM "room_categories" WHERE "room_categories"."hotel_id" = $1  [["hotel_id", 22]]
  ↳ app/controllers/hotels_controller.rb:103
  Room Load (0.3ms)  SELECT "rooms".* FROM "rooms" WHERE "rooms"."room_category_id" IN ($1, $2)  [["room_category_id", 4], ["room_category_id", 9]]
  ↳ app/controllers/hotels_controller.rb:103
  Room Load (0.4ms)  SELECT "rooms".* FROM "rooms" WHERE "rooms"."room_category_id" IN (SELECT "room_categories"."id" FROM "room_categories" WHERE "room_categories"."hotel_id" = $1)  [["hotel_id", 22]]
  ↳ app/controllers/hotels_controller.rb:115
  Room Load (0.9ms)  SELECT DISTINCT "rooms".* FROM "rooms" INNER JOIN "reservations" ON "reservations"."room_id" = "rooms"."id" WHERE "reservations"."hotel_id" = $1 AND (reservations.arrival <= '2019-11-27' AND '2019-11-28' >= reservations.departure)  [["hotel_id", 22]]
  ↳ app/controllers/hotels_controller.rb:115
  Rendering hotels/rooms_availability.js.erb
  Rendered hotels/rooms_availability.js.erb (0.6ms)
Completed 200 OK in 26ms (Views: 13.8ms | ActiveRecord: 2.4ms)

Answer 1

從控制台日志中可以看到第108行有問題。 問題是：當您將arrival或departure作為空字符串""傳遞arrival ，則

Date.parse ""

將為您提供ArgumentError: invalid date 。

嘗試在解析之前檢查這些值，或使用begin..rescue塊。