修改查询以显示来自另一个 table Laravel 或 Ajax 的数据

Question

我正在使用 Laravel 制作酒店预订应用程序。我现在必须根据输入的日期过滤房间。我正在使用 ajax 来实现这一点。

$('#check-availability').on('click', function(){
                    var checkin_date = $('#check-checkin').val();
                    $.ajax({
                        url:"{{url('/available_room')}}/" + checkin_date,  
                        dataType: 'json',
                        beforeSend:function(){
                            $('#room_list').html('Loading');
                        },
                        success:function(res){
                            var r_html = '';

                            var input_checkin_date = $('#check-checkin').val();
                            var input_checkout_date = $('#check-checkout').val();
                            var input_adults = $('#check-adults').val();
                            var input_children = $('#check-children').val();

                            $.each(res.data,function(index,row){
                                r_html += '<div class="card available-room-card"><div class="card-body"><div class="row"></div><div class="row"><div class="d-flex align-items-center justify-content-between"><h5 id="room_name">'+row.room_name+'</h5><form action="/room/'+row.id+'" method="GET" name="grab"><input type="hidden" class="a_checkin" id="a_checkin'+row.id+'" name="a_checkin" value="'+input_checkin_date+'"><input type="hidden" class="a_checkout" id="a_checkout'+row.id+'" name="a_checkout" value="'+input_checkout_date+'"><input type="hidden" class="a_adults" id="a_adults'+row.id+'" name="a_adults" value="'+input_adults+'"><input type="hidden" class="a_children" id="a_children'+row.id+'" name="a_children" value="'+input_children+'"><button type="submit" id="btn-view'+row.id+'" class="btn btn-view btn-primary btn-room-card d-flex align-contents-center"><i class="bx bx-show"></i>View</button></form></div><p id="room_price">Start from <strong>P'+row.price+' / night</strong></p><div class="d-flex flex-wrap checkout-room-row"><span id="room_hotel" class="room-details d-flex align-items-center"><i class="bx bx-buildings"></i>'+row.hotel+'</span><span id="room_dimension" class="room-details d-flex align-items-center"><i class="bx bx-ruler"></i>'+row.dimension+'</span><span id="room_bed" class="room-details d-flex align-items-center"><i class="bx bx-bed"></i>'+row.no_of_beds+' beds</span></div><p id="room_desc" class="available-room-description">'+row.description+'</p><div class="d-flex flex-wrap">'+row.amenities+'</div></div></div></div>';
                            });
                            $('#room_list').html(r_html);

                            $('.txt_checkin').html(input_checkin_date);
                            $('.txt_checkout').html(input_checkout_date);
                            $('.txt_adults').html(input_adults);
                            $('.txt_children').html(input_children);

                            var checkin_id = $('.a_checkin').attr('id');
                            var checkout_id = $('.a_checkout').attr('id');
                            var adults_id = $('.a_adults').attr('id');
                            var children_id = $('.a_children').attr('id');
                            
                            var get_checkin = $('#' + checkin_id).val();
                            var get_checkout = $('#' + checkout_id).val();
                            var get_adults = $('#' + adults_id).val();
                            var get_children = $('#' + children_id).val();

                            localStorage.setItem('view_checkin', get_checkin);
                            localStorage.setItem('view_checkout', get_checkout);
                            localStorage.setItem('view_adults', get_adults);
                            localStorage.setItem('view_children', get_children);
                        }
                    });
                }).click();

这是我的控制器

public function check_available_room(Request $request, $checkin_date)
    {
        $available_rooms = DB::SELECT("SELECT * FROM rooms WHERE id NOT IN (SELECT room_id FROM bookings WHERE '$checkin_date' BETWEEN checkin_date AND checkout_date)");

        return response()->json(['data'=>$available_rooms]);
    }

这是输出

我的问题是如何修改查询或 Ajax 代码以将便利设施（底部的数字）显示为这样的图标（便利设施是一个单独的 table)

最初我是在视图

上使用PHP实现的

@php
   $data = $roomDetails->amenities;
   $dataArray = explode(',', $data);
   $responseData = [];
   foreach ($dataArray as $datas)
   {
     $result = DB::table('amenities')->where('id', $datas)->get();

     foreach ($result as $res)
     {
       $responseData[] = '<button type="button" class="btn btn-outline-secondary d-flex align-items-center">
                            <i class="bx '. $res->icon .'"></i></button>';
      }
     }
@endphp

<div class="d-flex flex-wrap">
   @foreach ($responseData as $output)
       {!! $output !!}
   @endforeach
</div>

谢谢

编辑

我可以通过修改里面的代码来显示图标 ajax

var r_html = '';
var a_html = '';
$.each(res.data,function(index,row){
   r_amenities = row.amenities;
   s_amenities = r_amenities.split(',');

   $.each(s_amenities, function(index, amenities){
       a_html += '<button type="button" class="btn btn-outline-secondary d-flex align-items-center"><i class="bx '+amenities+'"></i></button>';
});
   console.log(s_amenities);

   r_html += '<div class="card available-room-card"><div class="card-body"><div class="row"></div><div class="row"><div class="d-flex align-items-center justify-content-between"><h5 id="room_name">'+row.room_name+'</h5><form action="/room/'+row.id+'" method="GET" name="grab"><input type="hidden" class="a_checkin" id="a_checkin'+row.id+'" name="a_checkin" value="'+input_checkin_date+'"><input type="hidden" class="a_checkout" id="a_checkout'+row.id+'" name="a_checkout" value="'+input_checkout_date+'"><input type="hidden" class="a_adults" id="a_adults'+row.id+'" name="a_adults" value="'+input_adults+'"><input type="hidden" class="a_children" id="a_children'+row.id+'" name="a_children" value="'+input_children+'"><button type="submit" id="btn-view'+row.id+'" class="btn btn-view btn-primary btn-room-card d-flex align-contents-center"><i class="bx bx-show"></i>View</button></form></div><p id="room_price">Start from <strong>P'+row.price+' / night</strong></p><div class="d-flex flex-wrap checkout-room-row"><span id="room_hotel" class="room-details d-flex align-items-center"><i class="bx bx-buildings"></i>'+row.hotel+'</span><span id="room_dimension" class="room-details d-flex align-items-center"><i class="bx bx-ruler"></i>'+row.dimension+'</span><span id="room_bed" class="room-details d-flex align-items-center"><i class="bx bx-bed"></i>'+row.no_of_beds+' beds</span></div><p id="room_desc" class="available-room-description">'+row.description+'</p><div class="d-flex flex-wrap">'+a_html+'</div></div></div></div></div>';
                            });
$('#room_list').html(r_html);

这是输出

但应该是这样的。我怎样才能做到这一点

这是console.log

Answer 1

您需要便利设施和房间 table 之间的关系。并考虑为此使用 models。

根据您对其他 table 的需求，您的查询必须 return 关系（与其他 table 的全部或部分数据），以便您可以使用它在你的 ajax 部分。您可以找到有关关系 in here.

的更多信息

Answer 2

终于解决了！我修改了控制器和 ajax

 public function check_available_room(Request $request, $checkin_date)
{
    $available_rooms = DB::SELECT("SELECT * FROM rooms WHERE id NOT IN (SELECT room_id FROM bookings WHERE '$checkin_date' BETWEEN checkin_date AND checkout_date)");
    
    $data = [];

    foreach($available_rooms as $room){

        $get_amenities = DB::table('rooms')->where('id', $room->id)->pluck('amenities')->first();
        $dataArray = explode(',', $get_amenities);
        $responseData = [];

        foreach ($dataArray as $datas)
        {
            $result = DB::table('amenities')->where('id', $datas)->get();

            foreach ($result as $res)
            {
                $responseData[] = '<button type="button" class="btn btn-outline-secondary d-flex align-items-center">
                                        <i class="bx '. $res->icon .'"></i></button>';
            }
        }

        $data[] = ['room' => $room, 'amenities'=> $responseData];
    }

    return response()->json(['data'=>$data]);

Ajax

$.each(res.data,function(index,row){
                            r_html += '<div class="card available-room-card"><div class="card-body"><div class="row"></div><div class="row"><div class="d-flex align-items-center justify-content-between"><h5 id="room_name">'+row.room.room_name+'</h5><form action="/room/'+row.room.id+'" method="GET" name="grab"><input type="hidden" class="a_checkin" id="a_checkin'+row.room.id+'" name="a_checkin" value="'+input_checkin_date+'"><input type="hidden" class="a_checkout" id="a_checkout'+row.room.id+'" name="a_checkout" value="'+input_checkout_date+'"><input type="hidden" class="a_adults" id="a_adults'+row.room.id+'" name="a_adults" value="'+input_adults+'"><input type="hidden" class="a_children" id="a_children'+row.room.id+'" name="a_children" value="'+input_children+'"><button type="submit" id="btn-view'+row.room.id+'" class="btn btn-view btn-primary btn-room-card d-flex align-contents-center"><i class="bx bx-show"></i>View</button></form></div><p id="room_price">Start from <strong>P'+row.room.price+' / night</strong></p><div class="d-flex flex-wrap checkout-room-row"><span id="room_hotel" class="room-details d-flex align-items-center"><i class="bx bx-buildings"></i>'+row.room.hotel+'</span><span id="room_dimension" class="room-details d-flex align-items-center"><i class="bx bx-ruler"></i>'+row.room.dimension+'</span><span id="room_bed" class="room-details d-flex align-items-center"><i class="bx bx-bed"></i>'+row.room.no_of_beds+' beds</span></div><p id="room_desc" class="available-room-description">'+row.room.description+'</p><div id="a_btn" class="a_btn d-flex flex-wrap">'+row.amenities+'</div></div></div></div></div>';
                        });
                        $('#room_list').html(r_html);

                        $( ".a_btn" ).contents().filter(function() {
                            return this.nodeType === 3;
                        }).remove();

修改查询以显示来自另一个 table Laravel 或 Ajax 的数据

Modifying the query to show data from another table Laravel or Ajax

php

ajax

laravel