Как получить данные по диапазону дат из базы данных mysql, используя ajax в laravel php?

Question

Я создаю простую систему управления выходными днями, которая позволяет пользователю выполнять операции CRUD и получать данные в соответствии с диапазоном дат . Однако моя операция CRUD работает как положено. Но я не могу получить данных в соответствии с выбранным пользователем диапазоном дат из ajax вызова . Также это самое первое приложение, которое разрабатывается с использованием laravel framework и ajax. Я надеюсь, что кто-то здесь может определить причину проблемы с моим кодом и сможет мне помочь.

index.blade. php

 <div class="input-group input-daterange">
       <input type="text" name="from_date" id="from_date" readonly class="form-control">
       <div class="input-group-addon to-text"> to </div>
       <input type="text"  name="to_date" id="to_date" readonly class="form-control">
 </div>

ajax метод обработки запросов в HolidayController. php

    public function fetch_data(Request $request)
    {
        if($request->ajax()) {
            if($request->from_date != '' && $request->to_date != '') {
                $data = DB::table('holidays')
                    ->whereBetween('startdate', 
                    array($request->from_date, $request->to_date))
                    ->get();
            }
            else {
                $data = DB::table('holidays')->orderBy('startdate', 'desc')
                ->get();
            }
            echo json_encode($data);

        }
    }

web. php

<?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::Resource('holiday', 'HolidayController');

make ajax запрос от custom_script. js

$(document).ready(function() {


    var date = new Date();

    $('.input-daterange').datepicker( {
        todayBtn: 'linked',
        format: 'yyyy-mm-dd',
        autoclose: true
    });

    var _token = $('input[name="_token"]').val();

    fetch_data();

    function fetch_data(from_date = '', to_date = '') {
        $.ajax({
            url:"{{ route('holiday.fetch_data')}}",
            method:"POST",
            data:{
                from_date:from_date, to_date:to_date, _token:_token
            },
            dataType:"json",
            success:function(data) {
                var output = '';
                $('#total_records').text(data.length);
                for(var count = 0; count < data.length; count++) {
                    output += '<tr>';
                    output += '<td>' + data[count].id + '</td>';
                    output += '<td>' + data[count].firstname + '</td>';
                    output += '<td>' + data[count].lastname + '</td>';
                    output += '<td>' + data[count].startdate + '</td>';
                    output += '<td>' + data[count].enddate + '</td></tr>';
                }
                $('tbody').html(output);
            }
        })
    }

    $('#filter').click(function() {
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        if(from_date != '' && to_date != '') {
            fetch_data(from_date, to_date);
        }
        else {
            alert('Both Date is required');
        }
    });

    $('#refresh').click(function() {
        $('#from_date').val('');
        $('#to_date').val('');
        fetch_data();
    });

});

Answer 1

С query проблем нет, если только $request->ajax() пока не может быть удалено. И измените свой блейд-файл следующим образом: тип input должен быть date, а не text и удалить атрибут readonly.

<input type="date" name="from_date" id="from_date" class="form-control">
   <div class="input-group-addon to-text"> to </div>
<input type="date"  name="to_date" id="to_date" class="form-control">

И убедитесь, что данные date являются действительными данными с база данных

для демонстрации

$(document).ready(function() {


    function fetch_data(from_date = '', to_date = '') {
        if(from_date != '' && to_date != '') {
               console.log(from_date+' | '+to_date)
        }
       
    }

    $('#filter').click(function() {
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        if(from_date != '' && to_date != '') {
            fetch_data(from_date, to_date);
        }
        else {
            alert('Both Date is required');
        }
    });

    $('#refresh').click(function() {
        $('#from_date').val('');
        $('#to_date').val('');
        fetch_data();
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group input-daterange">
       <input type="date" name="from_date" id="from_date" class="form-control">
       <div class="input-group-addon to-text"> to </div>
       <input type="date"  name="to_date" id="to_date" class="form-control">
       <button id="filter">filter</button>
       <button id="refresh">refresh</button>
 </div>

Answer 2

1. Прежде всего, вы не можете использовать {{ route('holiday.fetch_data')}} внутри вашего . js файла . Используйте простой маршрут, набрав url или каким-либо другим способом, чтобы получить маршрут из .blade. php файла в. js файл. например, используя атрибуты data- *.

в элементе #filter, передайте маршрут с помощью date-route="{{ route('holiday.fetch_data') }}"

, а затем в $('#filter').click(function() do

var route = $(this).data('route');

2. Пожалуйста, убедитесь, что ваш запрос ajax достигнут в вашем fetch_data в вашем контроллере. Чтобы сделать это, просто напишите внутри вашего fetch_data

dd($request->all());

Если вы получаете запросы от ajax, это означает, что ваши соединения с fetch_data работают нормально.

3. Попробуйте парсинг дат с Carbon, как я делаю прямо ниже. Кроме того, удалите $request->ajax() и return json data с return.

use Carbon\Carbon;

public function fetch_data(Request $request)
{     
   if($request->from_date != '' && $request->to_date != '') {
        $from = Carbon::parse($request->from_date)->toDateString();
        $to = Carbon::parse($request->to_date)->toDateString();

       $data = DB::table('holidays')->whereBetween('startdate',[$from, $to])->get();
   }else {
       $data = DB::table('holidays')->orderBy('startdate', 'desc')->get();
   }

   return json_encode($data);
}