如何在视图中使用返回的 json 响应 - laravel 5.2

Question

我正在使用 Laravel 5.2 + angularjs。

目标：必须提交只有复选框的表单。根据选中的复选框，复选框 id 获取数据并返回视图。返回的数据会显示在同一页面的其他div中。

例如：表单在div1，返回的数据应该在div2、div3和div4中显示。视图上只显示一个分区，其余部分被隐藏。

终于 - 我可以使用 angular 隐藏和显示分区，并且可以使用 ajax 提交 div1 中的表单。但我无法将数据从控制器返回到视图（数据以 json 格式返回）并显示在其他部门。

如何在视图上显示返回的响应 json 对象？

下面是我的代码：

路线：

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

});

控制器：

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

}

查看：

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

我解决了我的问题，这是我更改/添加的代码：

AngularJs 文件：

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

ma​​in.js：

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

Route 和 Controller 文件中没有代码更改。在视图中只将带有复选框类代码的div更改为如下所示。

Laravel 文件：

查看：

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

注意：我没有使用我在问题中发布的 ajax 脚本。控制器和路由文件没有改变。