0
Я использую Laravel 5.2 + angularjs.Как использовать возвращенный ответ json в поле зрения - laravel 5.2
ЦЕЛЬ: Необходимо предоставить форму, которая имеет только флажки. На основе установленного флажка установите флажок в поле идентификатора и верните его в представление. Эти возвращенные данные будут отображаться в другом div той же страницы.
Пример: Форма находится в div1, а возвращаемые данные должны отображаться в div2, div3 и div4. Только одно разделение будет отображаться в режиме просмотра.
FINALLY - Я могу скрыть и отобразить разделы с помощью угловых, и я могу отправить форму, которая находится в div1, используя ajax. Но я не могу вернуть данные к представлению от контроллера (данные возвращаются в формате json) и отображаются на других разделах.
Как я могу отобразить возвращаемый объект ответа json на представлении?
Ниже мой код:
Маршрут:
Route::group(['middleware' => ['web']], function() {
Route::get('/form', '[email protected]'); // View will be displayed by using this method
Route::post('/form','[email protected]'); // 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>
Вы можете скомпилировать код в контроллере, я думаю, попытайтесь вернуть непосредственно '$ data' как Json' return response() -> json ($ data) '. –
Да, я могу это сделать, но это не решает мою проблему. – Himakar
Я решил это угловым способом .......... Thankyou – Himakar