Wie partiell mit AJAX zu rendern? Laravel 5.2

Question

Ich bin in einer Situation, in der ich Informationen über Parkplätze, die in einer MYSQL-Datenbank gespeichert sind, auflisten möchte. Ich verwende AJAX, um Anrufe zum API-Endpunkt (/ api/spots) zu machen und eine Liste von Punkten zurückzugeben. Ich habe eine Teilansicht mit Blade-Syntax für das Layout der Informationen erstellt (Partials/Spot.blade.php).

Ich frage mich, ob es eine Möglichkeit gibt, eine Controller-Methode zu erstellen, die eine Teilansicht zurückgibt und es auf einen Teil der Seite rendert, ohne einen Rückweg zum Server zu machen. Ist das mit meinen Partials/Spot.blade.php möglich? Vielleicht sollte ich eine Methode erstellen, um den gesamten HTML-Code als String zurückzugeben und JS dazu zu bringen, diesen in das DOM einzufügen?

Die Art, wie ich es gerade mache, ist das Rendern der Partials/Spot.blade.php, wenn die Seite anfänglich geladen ist, und das Entfernen von dem Bildschirm mit CSS. Dann, nach dem AJAX-Aufruf zum Server, nehme ich den HTML-Code in diesem versteckten Teil und verwende REGEX, um die Daten im Layout zu platzieren. Das scheint ein bisschen dreckig zu sein. Ich frage mich nur, wie andere Leute dieses Problem gelöst haben.

Ihr Feedback wäre sehr dankbar,

Matt

Answer 1

Es ist einfach (:

Schauen Sie sich das Beispiel und Ihre eigenen Änderungen vornehmen:

Controller:

class StatisticsController extends Controller 
{ 

    public function index() 
    { 
     return view('statistics.index'); 
    } 


    public function filter(Request $request, $fields) { 
     // some calculation here... 
     return view('statistics.response', compact('stats')); // will render statistics/response.blade.php file with passing results of filter 
    } 
} 

Ansichten:

Seite mit Datum Filterung Statistiken/index.blade.php

@extends('layouts.billing') 

@section('title') Statistics @stop 

@section('js_footer') 
    <script> 
     function doGet(url, params) { 
      params = params || {}; 

      $.get(url, params, function(response) { // requesting url which in form 
       $('#response').html(response); // getting response and pushing to element with id #response 
      }); 
     } 

     $(function() { 
      doGet('/statistics/filter'); // show all 

      $('form').submit(function(e) { // catching form submit 
       e.preventDefault(); // preventing usual submit 
       doGet('/statistics/filter', $(this).serializeArray()); // calling function above with passing inputs from form 
      }); 
     }); 
    </script> 
@stop 

@section('content') 
    <div class="row"> 
     <div class="col-sm-12 col-md-6 col-lg-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3>Statistics</h3> 
       </div> 
       <div class="panel-body"> 
        <form> 
         <label>Time</label> 
         <div class="input-group"> 
          <input type="text" name="time_from" value="{{ date('Y-m').'-01 00:00:00' }}" class="form-control" autocomplete="off"> 
          <input type="text" name="time_to" value="{{ date('Y-m-d H:i:s', time()) }}" class="form-control" autocomplete="off"> 
         </div> 

         <button type="submit" class="btn btn-sm btn-primary pull-right"> 
          <i class="fa fa-search"></i> Show 
         </button> 
        </form> 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12"> 
      <div id="response"> HERE WILL BE INJECTED RESULT OF FILTERING </div> 
     </div> 
    </div> 
@stop 

und teilweise für Ergebnis der Filterung Rendering:

Statistiken/response.blade.php

<div class="table-responsive"> 
    <table class="table table-striped table-borderless text-center"> 
     <thead> 
      <th>ID</th> 
      <th>Partner</th> 
      <th>Tariffs</th> 
      <th>Total</th> 
     </thead> 
     <tbody> 
     @foreach($stats AS $stat) 
      some data here 
     @endforeach 
     </tbody> 
    </table> 
    </div>