如何在Laravel PHP中使用Ajax根据日期范围从mysql数据库中检索数据? [英] How to retrieve data according to date range from mysql database using ajax in laravel php?

问题描述

我正在构建一个简单的假期管理系统，该系统允许用户执行 CRUD 操作并根据日期范围 检索数据.但是我的CRUD操作正在按预期方式工作.但是我无法根据用户从Ajax调用中选择的日期范围来检索数据.这也是使用laravel框架以及ajax开发的第一个应用程序.我希望这里的人可以找出导致我的代码出现问题的原因，并且能够为我提供帮助.

index.blade.php

 < div class ="input-group input-daterange">< input type ="text" name ="from_date" id ="from_date"只读class ="form-control">< div class ="input-group-addon to-text">到</div><输入type ="text" name ="to_date" id ="to_date"只读class ="form-control"></div> 

HolidayController.php

中的

ajax 请求处理程序方法

 公共函数fetch_data(Request $ request){if($ request-> ajax()){if($ request-> from_date！=''&& $ request-> to_date！=''){$数据= DB ::表('假日')-> whereBetween('startdate'，数组($ request-> from_date，$ request-> to_date))-> get();}别的 {$ data = DB :: table('假日')-> orderBy('startdate'，'desc')-> get();}回声json_encode($ data);}} 

web.php

 <?php路线:: get('/'，函数(){返回视图('welcome');});Auth :: routes();路线:: get('/home'，'HomeController @ index')-> name('home');路线:: Resource('holiday'，'HolidayController'); 

从 custom_script.js

发出 ajax 请求

  $(document).ready(function(){var date = new Date();$('.input-daterange').datepicker({todayBtn:已关联"，格式:"yyyy-mm-dd"，自动关闭:true});var _token = $('input [name ="_ token"]').val();fetch_data();函数fetch_data(from_date =''，to_date =''){$ .ajax({url:"{{route('holiday.fetch_data')}}"，方法:"POST"，数据:{from_date:from_date，to_date:to_date，_token:_token}，dataType:"json"，成功:功能(数据){var output ='';$('#total_records').text(data.length);for(var count = 0; count< data.length; count ++){输出+ ='< tr>';输出+ ='< td>'+ data [count] .id +'</td>';输出+ ='< td>'+ data [count] .firstname +'</td>';输出+ ='< td>'+ data [count] .lastname +'</td>';输出+ ='< td>'+ data [count] .startdate +'</td>';输出+ ='< td>'+ data [count] .enddate +'</td></tr>';;}$('tbody').html(输出);}})}$('#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);}别的 {alert('需要两个日期');}});$('#refresh').click(function(){$('#from_date').val('');$('#to_date').val('');fetch_data();});}); 

解决方案

query 没问题，除非 $ request-> ajax()可能会删除现在.并按如下所示更改刀片文件， input 类型应为 date ，而不是 text ，并删除 readonly 属性./p>

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

并确保 date 数据是数据库中的有效数据

用于演示

  $(document).ready(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);}别的 {alert('需要两个日期');}});$('#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"><输入type ="date" name ="from_date" id ="from_date" class ="form-control">< div class ="input-group-addon to-text">到</div><输入type ="date" name ="to_date" id ="to_date" class ="form-control">< button id ="filter"> filter</button>< button id ="refresh">刷新</button></div>  

I am building a simple holiday management system which allows the user to perform CRUD operation and to retrieve data according to a date range. However my CRUD operation is working as expected. But I am not able to retrieve the data according to user selected date range from an ajax call. Also this is the very first application that am developing by using laravel framework as well as ajax. I hope someone here may identify the reason for the problem am having with my code and will be able to help me.

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 request handler method in 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 request from 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();
    });

});

解决方案

There is no problem with query,unless $request->ajax() might remove for now. And change your blade file as follows,input type should be date, not text and remove readonly attribute.

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

And make sure that date data is valid data with database

For demonstration

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

这篇关于如何在Laravel PHP中使用Ajax根据日期范围从mysql数据库中检索数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！