Laravel - 带有 Ajax 的 daterangepicker 返回 500 内部服务器错误的状态答案

【问题标题】：Laravel - daterangepicker with Ajax returns status of 500 internal server errorLaravel - 带有 Ajax 的 daterangepicker 返回 500 内部服务器错误的状态
【发布时间】：2019-07-16 23:43:01
【问题描述】：

所以我在我的 Laravel 项目中添加了带有 Ajax 的 daterangepicker，在我的刀片上，我有 daterangepicker，就像一个日历来选择日期并刷新和过滤。现在，当我点击刷新时，它会刷新我当前选择的日期，但是当我过滤时没有任何反应.当我在 Safari 浏览器上检查元素时，它显示：加载资源失败：服务器响应状态为 500（内部服务器错误）。

这是我的 DateRangeController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Post;
use Auth;

class DateRangeController extends Controller
{
    public function index()
    {
        $posts = Post::where('user_id', Auth::id());
        return view('daterange')->with('posts', $posts);
    }

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

?>

这是我的带有脚本的 daterange.blade.php

<!DOCTYPE html>
<html>
 <head>
  <title>Date Range Fiter Data in Laravel using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
 </head>
 <body>
  <br />
  <div class="container box">
   <h3 align="center">Date Range Fiter Data in Laravel using Ajax</h3><br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <div class="row">
      <div class="col-md-5">Sample Data - Total Records - <b><span id="total_records"></span></b></div>
      <div class="col-md-5">
       <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</div>
           <input type="text"  name="to_date" id="to_date" readonly class="form-control" />
       </div>
      </div>
      <div class="col-md-2">
       <button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Filter</button>
       <button type="button" name="refresh" id="refresh" class="btn btn-warning btn-sm">Refresh</button>
      </div>
     </div>
    </div>
    <div class="panel-body">
     <div class="table-responsive">
      <table class="table table-striped table-bordered">
       <thead>
        <tr>
         <th width="35%">Broj Kesice</th>
         <th width="50%">Ime</th>
         <th width="15%">Broj Telefona</th>
        </tr>
       </thead>
       <tbody>
            @foreach($posts as $post)
                <tr>
                    <td>{{$post->br_kesice}}</td>
                    <td>{{$post->ime}}</td>
                    <td>{{$post->br_telefona}}</td>
                </tr>
            @endforeach
       </tbody>
      </table>
      {{ csrf_field() }}
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
$(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('daterange.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].post_br_kesice + '</td>';
     output += '<td>' + data[count].post_ime + '</td>';
     output += '<td>' + data[count].date + '</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();
 });


});
</script>

这是我的日期范围路线

Route::get('/daterange', 'DateRangeController@index');
Route::post('/daterange/fetch_data', 'DateRangeController@fetch_data')->name('daterange.fetch_data');

有解决这个问题的办法吗？它需要显示所选日期的帖子

【问题讨论】：

原因可能是一些，但首先，尝试返回控制器答案，不要回显它：return json_encode($data); 最好是return response()->json(['type' => 'success', 'data' => $data])
网络开发工具中的请求 url 是什么，当您执行操作时？
我做了 return json_encode($data); 和 return response()->json(['type' => 'success', 'data' => $data]); 但什么也没发生，它保持不变..
当我执行操作时，它返回我 { "message": "SQLSTATE[42S22]: Column not found: 1054 Unknown column 'date' in 'order Clause' (SQL: select * from @987654328 @ order by date desc)", "exception": "Illuminate\\Database\\QueryException", "file": "/Applications/XAMPP/xamppfiles/htdocs/monokl/vendor/laravel/framework/src/Illuminate/数据库/Connection.php", "line": 664, "trace": [ ...
Ouu ，我刚刚修复了它，在 url 请求中它说未知列日期，我用 created_at 修复了它及其工作。但现在的问题是它在中返回 Undefined for posts

标签： ajax laravel daterangepicker

【解决方案1】：

我将它全部固定为 created_at，而不是日期，现在我的 DateRangeController 看起来像这样：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Post;
use Auth;

class DateRangeController extends Controller
{
    public function index()
    {
        $posts = Post::where('user_id', Auth::id());
        return view('daterange')->with('posts', $posts);
    }

    public function fetch_data(Request $request)
    {
     if($request->ajax())
     {
      if($request->from_created_at != '' && $request->to_created_at != '')
      {
       $data = DB::table('posts')
         ->whereBetween('created_at', array($request->from_created_at, $request->to_created_at))
         ->get();
      }
      else
      {
       $data = DB::table('posts')->orderBy('created_at', 'desc')->get();
      }
      return json_encode($data);
     }
    }
}

?>

它现在将所有帖子返回给我，但它就像未定义的一样，并且在网络 url 请求上它返回给我真实的，而不是未定义的。有什么解决办法吗？

【讨论】：

它应该是 if($request->from_date != '' && $request->to_date != '') 你发送的请求数据数据：{from_date:from_date, to_date:to_date , _token:_token} 并在“whereBetween”中的查询中进行更改
是的，我改变了它，但是当我改变它时，当我选择某个日期时它什么也没显示，但是当我刷新它时它显示了所有 14 个帖子，但它显示我每个帖子都未定义->br_kesice , $post->ime...
你能把项目上传到github吗？！
我马上做
检查我的新答案！

【解决方案2】：

你在成功函数中的问题，你尝试处理未找到的属性，这是完整的脚本标签


<script>
    var _token = $('input[name="_token"]').val();
    $(document).ready(function(){

 var date = new Date();

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


 //if you leave this ,will load the data if you remove this  remove comment  from line number 43 to 49 to load data :)
        fetch_data();


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


});
function fetch_data(from_date = '', to_date = '')
{
    $.ajax({
        url:"{{ route('daterange.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);
            $.each(data,function (key,value) {
                console.log(value)
                output += '<tr>';
                output += '<td>' + value.br_kesice + '</td>';
                output += '<td>' + value.ime + '</td>';
                output += '<td>' + value.created_at + '</td></tr>';
            });
            $('tbody').html(output);
        }
    })
}
</script>

删除存储库，祝你的项目好运:)

【讨论】：