2016-06-05 9 views
1

MYSQL 데이터베이스에 저장된 주차 장소에 대한 정보를 나열하고자하는 상황에 처해 있습니다. API 끝점 (/ api/spots)을 호출하고 지점 목록을 반환하기 위해 AJAX를 사용하고 있습니다. 나는 정보의 레이아웃 (partials/Spot.blade.php)에 대한 블레이드 구문을 사용하여 부분 뷰를 만들었습니다.AJAX를 사용하여 부분 렌더링하는 방법? Laravel 5.2

서버로 다시 돌아 가지 않고도 부분보기를 반환하고 페이지의 일부로 렌더링하는 컨트롤러 메서드를 만드는 방법이 있는지 궁금합니다. 내 partials/Spot.blade.php를 사용하여 가능합니까? 어쩌면 내가 모든 HTML을 문자열로 반환하고 JS를 DOM에 추가하는 메서드를 만들어야할까요?

내가 현재하고있는 방법은 페이지가 처음로드 될 때 partials/Spot.blade.php를 렌더링하고 CSS를 사용하여 화면에서 제거하는 것입니다. 그런 다음 AJAX를 서버에 호출 한 후이 숨겨진 부분의 HTML을 가져 와서 REGEX를 사용하여 레이아웃에 데이터를 배치합니다. 그래도 조금 더러운 것 같습니다. 다른 사람들이이 문제를 어떻게 해결했는지 궁금합니다.

귀하의 의견이 크게 감사하겠습니다

,

매트

답변

3

그것은 간단 (의 :이 예에서

찾는 자신 만의 수정합니다

컨트롤러 :

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

보기 :

날짜 필터링 통계/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 

페이지로 필터링 결과 렌더링 부분 : 컨트롤러 그래서

통계/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> 
+1

모든 통계를 나열하는 부분을 반환하고 get의 성공에 따라 내용을 정보 목록으로 대체합니다. 좋은! 샘플 코드를 보내 주셔서 감사합니다! : D –

+0

목록에 계속 추가하고 싶지만 쿼리가 변경 될 때만 새 항목을 추가한다고 가정 해 보겠습니다. 따라서 일부 이벤트가 발생하고 AJAX를 사용하여 새 쿼리를 실행하고 이미 렌더링 된 목록에 추가하려고합니다. 그것에 대해 어떻게 생각 하나? –

+0

laravel 질문보다 JS 질문이 더 많습니다. 당신은 항상 아약스 결과를 위해 컨테이너에 append()를 할 수 있습니다. 그렇지 않으면 json으로 응답하고 콧수염을 사용하여 렌더링에 대해 생각하십시오 – num8er