So verwenden Sie die zurückgegebene JSON-Antwort im View - Laravel 5.2

Question

Ich benutze Laravel 5.2 + angularjs.

Ziel: müssen ein Formular, die nur Kontrollkästchen haben. Basierend auf der Checkbox aktiviert die Checkbox die Daten und kehrt zur Ansicht zurück. Diese zurückgegebenen Daten werden in einem anderen div derselben Seite angezeigt.

Zum Beispiel: Formular ist in Div1 und zurückgegebene Daten sollten in Div2, Div3 und Div4 angezeigt werden. Nur eine Abteilung wird auf der Ansicht angezeigt werden Rest ausgeblendet.

ENDLICH - Ich bin in der Lage, Divisionen mit eckigen zu verstecken und anzuzeigen, und ich bin in der Lage, das Formular, das in Div1 ist mit Ajax. Aber ich bin nicht in der Lage, die Daten zurück in die Ansicht vom Controller zu bekommen (Daten werden im JSON-Format zurückgegeben) und auf anderen Abteilungen angezeigt.

Wie kann ich das zurückgegebene Antwort-JSON-Objekt in der Ansicht anzeigen?

Unten ist mein Code:

Route:

Route::group(['middleware' => ['web']], function() { 

    Route::get('/form', 'PublicController@index'); // View will be displayed by using this method 
    Route::post('/form','PublicController@show'); // Form is submitted and data is returned using this "show" method 

}); 

Controller:

class PublicController extends Controller 
{ 
    public function index(){ 
    $crimetypes = crimetype::get(); 
    $step1='';$step2='';$step3='';$step4='';$step5=''; 
    return view('frontend.form')->withCrimetypes($crimetypes)->withStep1($step1)->withStep2($step2)->withStep3($step3)->withStep4($step4)->withStep5($step5); 
    } 

    public function show(Request $request, QuestionsRepository $questionsRepository){ 

     $data = $questionsRepository->returnSteps($request); 

     $step1 = $data[0]; 
     $step2 = $data[1]; 
     $step3 = $data[2]; 
     $step4 = $data[3]; 
     $step5 = $data[4]; 

     // Data is successfully coming till here... 

     return response()->json(['step1'=>$step1, 'step2'=>$step2, 'step3'=>$step3, 'step4'=>$step4, 'step5'=>$step5],200); 

     // Here it is not allowing to use any other return type other than response json.. 
    } 

} 

Ausblick:

<div ng-show="div1"> 
     <div> 
      {!! Form::open(array('method'=>'POST','url'=>'/form','id'=>'formid'))!!} 
      <div class="col-md-12 row"> 
      <h2>Step - 1</h2> 
      <hr> 

      <br><p>Please select the relevant check boxes below.</p> 
      </div> 
      @foreach($crimetypes as $crimeType) 
      <div class="col-md-4"> 
      <ul class="list-unstyled"> 
       <li> 
       <div class="checkbox"> 
        <label> 
        <input value="{{$crimeType->id}}" type="checkbox" name="id[]" id="checkid"> {{$crimeType->type}} 
        </label> 
       </div> 
       </li> 
      </ul> 
      </div> 
      @endforeach 
      <div class="col-md-12 row"> 
      <div class="form-group"> 
       <br> 
       <hr> 
       <input type="submit" ng-click="click1()" value="Next" class="btn btn-default"> 
      </div> 
      </div> 
      {!!Form::close()!!} 
     </div> 
     </div> 

    <!-- On submitting above form hide the above div and display below div...this is working fine..--> 


<div ng-show="div2"> 
      <div class="col-md-12 row"> 
      <h2>Step - 2 : Crime Details</h2> 
      <hr> 
      <h3>Can You Tell Us About The Crime</h3> 
      <br> 
      <h5><strong>@if (!empty($step1[0])) ? {{$step1[0]->question}} : ''@endif?</strong></h5> 
      <div class="row"> 
       <div class="control-group"> 
       <div class="form-group col-md-3"> 
        <input type="number" class="form-control nbr" placeholder="xxx-xxx-xxx"> 
       </div> 
       <div class="col-md-9"></div> 
       </div> 
      </div> 

      <h5><strong>@if (!empty($step1[1])) ? {{$step1[1]->question}} : ''@endif?</strong></h5> 
      <div class="row"> 
       <div class="control-group"> 
       <div class="form-group col-md-3"> 
        <input type="number" class="form-control nbr" placeholder="xxx-xxx-xxx"> 
       </div> 
       <div class="col-md-9"></div> 
       </div> 
      </div> 

      <h5><strong>@if (!empty($step1[2])) ? {{$step1[2]->question}} : ''@endif?</strong></h5> 
      <div class="row"> 
       <div class="control-group"> 
       <div class="form-group col-md-3"> 
        <input type="textarea" class="form-control nbr"> 
       </div> 
       <div class="col-md-9"></div> 
       </div> 
      </div> 

      <div class="row"> 
       <br> 
       <hr> 
       <div class="form-group col-md-2"> 
       <button ng-click="click2()" class="btn btn-default">Next</button> 
       </div> 
       <div class="form-group col-md-offset-10"> 
       <button ng-click="click2()" class="btn btn-primary">Skip</button> 
       </div> 
      </div> 
      </div> 
     </div> 

    <!-- Similarly there are three more div's where I have to display the fetched data...--> 

Script:

<script type="text/javascript"> 
    $.ajaxSetup({ 
     headers: { 
     'X-CSRF-TOKEN': $('[name="_token"]').val() 
     } 
    }); 
    $(document).ready(function(){ 
    $('#formid').on('submit', function(e){ 
    e.preventDefault(); 

    var id = new Array(); 

    $('input[name="id[]"]:checked').each(function() 
    { 
     id.push($(this).val()); 
    }); 

    var $form = $('form'); 
    $.ajax({ 
     url:$form.attr('url'), 
     type: $form.attr('method'), 
     data: {id}, 
     dataType:'json', 

     success: function(data){ 
     var step1 = data.step1; 
     var step2 = data.step2; 
     var step3 = data.step3; 
     var step4 = data.step4; 
     var step5 = data.step5; 

     // If I use success, I am able to get data to these variables but unable to make use them on view wherever required. But now I am trying to use the returned object directly on the view without callback in the ajax. Even by using callback if it is possible, please help me out... 
     } 
    }); 
    }); 
    }); 
</script> 

Answer 1

ich mein Problem gelöst, hier ist der Code, den ich geändert/hinzugefügt:

AngularJS Dateien:

formCtrl.js:

angular.module('formCtrl', []).controller('formController', function($scope, $http, Comment){ 

Comment.get().success(function(data){ 
    $scope.crimeTypes = data[0]; 
}); 
$scope.div1 = true; 
$scope.div2 = false; 
$scope.div3 = false; 
$scope.div4 = false; 
$scope.div5 = false; 
$scope.div6 = false; 
$scope.div7 = false; 

$scope.selected = {}; 
$scope.click1 = function(data){ 

    var id = []; 
    for(var i in data){ 
     if(data[i].selected==true){ 
      id.push(data[i].id); 
     } 
    } 

    $scope.selected = {id}; 
    $http({ 
     method : 'POST', 
     url  : '/index1', 
     data : $.param($scope.selected), 
     headers :{'Content-Type':'application/x-www-form-urlencoded'} 
    }) 
    .success(function(data) { 
     console.log(data); 
    }); 

    $scope.div1 = false; 
    $scope.div2 = true; 
    $scope.div3 = false; 
    $scope.div4 = false; 
    $scope.div5 = false; 
    $scope.div6 = false; 
    $scope.div7 = false; 
}; 

$scope.click2 = function(){ 
    $scope.div1 = false; 
    $scope.div2 = false; 
    $scope.div3 = true; 
    $scope.div4 = false; 
    $scope.div5 = false; 
    $scope.div6 = false; 
    $scope.div7 = false; 
}; 
$scope.click3 = function(){ 
    $scope.div1 = false; 
    $scope.div2 = false; 
    $scope.div3 = false; 
    $scope.div4 = true; 
    $scope.div5 = false; 
    $scope.div6 = false; 
    $scope.div7 = false; 
}; 
$scope.click4 = function(){ 
    $scope.div1 = false; 
    $scope.div2 = false; 
    $scope.div3 = false; 
    $scope.div4 = false; 
    $scope.div5 = true; 
    $scope.div6 = false; 
    $scope.div7 = false; 
}; 
$scope.click5 = function(){ 
    $scope.div1 = false; 
    $scope.div2 = false; 
    $scope.div3 = false; 
    $scope.div4 = false; 
    $scope.div5 = false; 
    $scope.div6 = true; 
    $scope.div7 = false; 
}; 
$scope.click6 = function(){ 
    $scope.div1 = false; 
    $scope.div2 = false; 
    $scope.div3 = false; 
    $scope.div4 = false; 
    $scope.div5 = false; 
    $scope.div6 = false; 
    $scope.div7 = true; 
}; 

}); 

formService.js:

angular.module('formService',[]) 
.factory('Comment', function($http){ 
return { 
    get:function(){ 
     return $http.get('/index1data'); 
    } 
} 
}); 

main.js:

var app = angular.module('angularApp', ['mainCtrl','formCtrl','formService'], function($interpolateProvider) { 
    $interpolateProvider.startSymbol('<%'); 
    $interpolateProvider.endSymbol('%>'); 
}); 

Keine Codeänderung in Route und Controller-Dateien. In Sicht änderte nur das div mit Checkbox Klassencode wie unten gezeigt.

Laravel Dateien:

Ausblick:

<div class="checkbox"> 
    <input value="<%crimeType.id%>" type="checkbox" ng-model="crimeType.selected" id="<%crimeType.type%>"> 
    <label for="<%crimeType.type%>"><% crimeType.type %></label> 
</div> 

HINWEIS: Ich habe nicht Ajax-Skript, das ich in der Frage gestellt hatte. Controller- und Routendateien werden nicht geändert.