如何在 laravel php 中使用 ajax 根据日期范围从 mysql 数据库中检索数据？

Posted 2023-02-24

【中文标题】如何在 laravel php 中使用 ajax 根据日期范围从 mysql 数据库中检索数据？

【英文标题】：How to retrieve data according to date range from mysql database using ajax in laravel php?

【发布时间】：2020-04-28 18:58:14

【问题描述】：

我正在构建一个简单的假期管理系统，它允许用户执行CRUD操作并根据日期范围检索数据。但是，我的 CRUD 操作按预期工作。但我无法根据用户选择的 ajax 调用中的日期范围检索数据。这也是第一个使用 laravel 框架和 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>

HolidayController.php

中的

ajax 请求处理程序方法

    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');

从 custom_script.js

发出

ajax

请求

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

);

【问题讨论】：

问题解决了，这正如我所料。问题是我试图在单独的 .js 文件中发送 AJAX，但 不起作用。感谢大家的帮助。

【参考方案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>

【讨论】：

非常感谢您的回复。如何将循环中的数据打印到此处的表格中？

在你的控制器echo json_encode($data);更改为return response($data)

我得到了正确的响应，现在我想打印它们。

在不知道您的响应数据结构的情况下，很难为您提供解决方案。因此，使用您的数据对象，提出不同的问题。正如您在 js 文件 for 循环中实施的那样 - 这将是过程。但是你为什么不打印它们，不要在这里得到它。但是，如果你认为这是你的问题的答案，请将其标记为答案。

不，现在我没有收到任何回复。请在此处查看：***.com/questions/59700663/…

【参考方案2】：

1.首先，您不能在 .js 文件中使用 route('holiday.fetch_data')。通过键入url 或以某种方式将路由从 .blade.php 文件检索到 .js 文件中来使用简单路由。例如使用 data-* 属性。

在#filter元素中通过date-route=" route('holiday.fetch_data') "的路由

然后，在$('#filter').click(function() 做

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

2.请确保您的 ajax 请求到达您的控制器中的 fetch_data。为了做到这一点，只需写在你的fetch_data

dd($request->all());

如果您收到来自 ajax 的请求，则意味着您与 fetch_data 的连接工作正常。

3. 尝试使用Carbon解析日期，就像我在下面所做的那样。另外，删除$request->ajax() 并使用return返回 json 数据。

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