So rufen Sie AJAX zum Abrufen von Daten aus der Datenbank

Question

Ich habe eine Laravel-Anwendung erstellt. Wo ich die Daten mit Datumsbereich suchen möchten. Hier benutze ich den Controller und nachdem ich den Controller aufgerufen habe, werden Daten abgerufen und auf dieselbe Seite umgeleitet. Hier gibt es Situationen wie das Laden von Seiten. Aber ich möchte nicht die ganze Seite laden. Stattdessen möchte ich, wenn ich Ajax verwenden möchte, um den Controller aufzurufen, nur diesen bestimmten Controller aufrufen und es gibt keine Umleitung. Wie mache ich es mit Ajax?

Hier ist mein Controller:

public function reportByDate(Request $request) 
{ 
    $revenue = DB::table('fees') 
     ->join('courses', 'courses.id', '=', 'fees.course_id') 
     ->join('users', 'courses.id', '=', 'users.course_id')    
     ->where('users.completed_status', '=', 1) 
     ->sum('fee'); 

     $startDate = $request->Input(['sdate']); 
     $finshDate=$request->Input(['edate']); 


    $input = DB::table('fees')->join('courses', 'fees.course_id', '=','courses.id') 
     ->join('users', 'users.course_id', '=', 'courses.id') 
     ->where('users.completed_status', 1) 
     ->whereBetween('users.date', [$startDate, $finshDate]) 
     ->groupBy('fees.course_id') 
     ->selectRaw('SUM(fee) as fee, courses.name') 
     ->get(); 


    return view('revenueDetails',['revenue'=>$revenue],['input'=>$input]); 
} 

Hier ist die Ansicht Seite:

@extends('layouts.master') 
@section('title') 
Revenue Details 
@endsection 
@section('content') 

<div class="container"> 
<h3> Revenue Details </h3> 
</br> 
</br> 

    {!! Form::open(array('route' => 'reportByDate','class'=>'form-horizontal','method'=>'POST')) !!} 
    {!! Form::token(); !!} 
    {!! csrf_field() ; !!} 
      <div class="form-group"> 
       <label> Start Date</label> 
       <input type="date" name="sdate" class="form-control" > 
      </div> 
      <div class="form-group"> 
       <label> End Date</label> 
       <input type="date" name="edate" class="form-control" > 
      </div> 

      <button type="submit" class="btn btn-default">Submit</button> 
    {!! Form::close() !!} 



<h4>Total Revenue: {{$revenue}}</h4></br> 
</br> 

     <table class="table table-striped table-bordered" id="example"> 
     <thead> 
      <tr> 
      <td>Serial No</td> 
      <td>Course Name</td>    
      <td>Course Revenue</td>      
      </tr> 
     </thead> 
     <tbody> 
     {{-- {{dd($input)}} --}} 
      <?php $i=1; ?> 
     @foreach($input as $row) 

      <tr> 
      <td>{{$i}}</td> 
      <td>{{$row->name}}</td> 
      <td>{{$row->fee}}</td> 



      </tr> 
      <?php $i++; ?>  
     @endforeach 


     </tbody> 


     </table> 
     <li><a href="{{ route('userDetails') }}">See the User Details</a></li> 
    </div> 
@endsection 

Answer 1

Sie können die json() Helfer verwenden, um Daten aus dem Controller zurückzukehren, anstatt eine Ansicht des Ladens:

in Ihrem Controller:

return response()->json([ 
    'revenue' => $revenue, 
    'input' => $input 
], 200); 

Beispiel dessen, was der Ajax-Aufruf aussehen würde:

$.ajax({ 
    url: "path/to/resource", 
    data: { sdate: "foo", edate: "bar", token: "{{ csrf_token() }}", 
    dataType: "json" 
}).done(function(data) { 

    // do something like diplay data; 

}).fail(function(jqXHR, responseText) { 

    // something went wrong 
}); 

Answer 2

Sie sollten zurückkehren json Antwort und Rendering Ihre HTML in Ajax-Callback-Funktion. Es ist einfach mit Laravel zu tun. Anstelle dieser Zeichenfolge "return view ('revenueDetails', ['revenue' => $ revenue], ['input' => $ input]);" Verwenden Sie diese "Antwort zurück() -> JSON (['Umsatz' => $ Umsatz, 'Eingabe' => $ Eingabe]);"

können Sie lesen, wie hier Ajax-Anfrage zu tun http://api.jquery.com/jquery.ajax/