[英]how to display json response data from controller in blade page in laravel using ajax?
我有 ajax 响应以 json 格式从控制器返回的数据,我可以在控制台中打印数据。 但我想在表格中显示它,我该如何显示它? 我搜索了解决方案,但所有解决方案都在 controller function 中写入 HTML 代码并将其作为响应返回,还有其他解决方案吗
我的 controller
<?php
namespace App\Http\Controllers\backend;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Category;
class CategoryCtrl extends Controller
{
//function search - show categories live search
public function index(Request $request)
{
if($request->ajax())
{
$categories = Category::where('name','LIKE','%'.$request->cat_search."%")->orderBY('created_at','DESC')->get();
return Response()->json($categories);
}
else {
$categories = Category::orderBY('created_at','DESC')->get();
return view('backend.category.list')->withcategories($categories);
}
}
}
看法
@extends('backend.layouts.app')
@section('content')
<input class="form-control" type="text" name="search" id="cat_search" placeholder="Category Search..." />
<table id="CategoriesTable" class="table table-striped table-vcenter js-dataTable-simple">
<thead>
<tr>
<th class="text-center w-5">#</th>
<th class="text-center">Name</th>
<th class="text-center hidden-xs">Icon</th>
<th class="text-center hidden-xs">Order</th>
<th class="text-center w-15">Status</th>
<th class="text-center">Created At</th>
<th class="text-center">Last Update</th>
<th class="text-center" style="width: 15%;">Actions</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $key=>$category)
<tr>
<td class="text-center">{{ $key+1 }}</td>
<td class="text-center text-capitalize">{{ $category->name }}</td>
<td class="text-center hidden-xs"><i class="{{ $category->icon }} fa-lg"></i></td>
<td class="text-center hidden-xs">{{ $category->order }}</td>
<td class="text-center text-capitalize">
<span class="btn btn-sm btn-pill @if($category->status == 'active') btn-primary @else btn-warning @endif">{{ $category->status }}</span>
</td>
<td class="text-center">{{ $category->created_at->format("Y-m-d g:i a") }}</td>
<td class="text-center">{{ $category->updated_at->format("Y-m-d g:i a") }}</td>
<td class="text-center">
<div class="btn-group">
<a href="{{ route('category.edit', ['id' => $category->id]) }}" class="btn btn-success">Edit</a>
<button class="btn btn-app" data-toggle="modal" data-target="#{{ $category->name.$category->id }}">Delete</button>
</div>
<!-- Modal -->
<div class="modal fade" id="{{ $category->name.$category->id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-card-header">
<div class="row">
<h4 class="col-md-10">Delete Category</h4>
<ul class="card-actions col-md-2">
<li>
<button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
</li>
</ul>
</div>
</div>
<div class="card-block">
<p>Are you sure, you want to delete category (<span class="text-capitalize">{{ $category->name }}</span>) ?</p>
<p>If you delete category, you will delete all category's products too.</p>
<p>Notice: if you want to hide category, you can update it's status to not active instad of delete it.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
{!! Form::Open(['url' => route('category.delete', ['id' => $category->id]) ]) !!}
<button class="btn btn-app" type="submit" data-dismiss="modal"> Delete</button>
{!! Form::Close() !!}
</div>
</div>
</div>
</div>
<!-- End Modal -->
</td>
</tr>
@endforeach
</tbody>
</table>
@endsection
ajax代码
<!-- Ajax code for category live search -->
<script type="text/javascript">
$('#cat_search').on('keyup',function(){
$value = $(this).val();
$.ajax({
type : 'get',
url : '{{ route('category.index') }}',
data:{'cat_search':$value},
dataType: 'json',
success:function(response){
//console.log(response);
});
});
})
</script>
我能说的最好方法是为该表制作刀片,并在 controller 中像往常一样将数据返回到该视图:
return view('your-blade-just-for-table')->with('data', $data);
并像往常一样再次在刀片中使用 laravel 在表中呈现数据
所以 laravel 会将刀片返回给您的 ajax 成功方法
在您的成功方法中,您可以执行以下操作:
success: function (data) {
$('.list-group').html(data);
},
以及你希望你的桌子放在哪里,只要把这个 div 放在哪里:
<div class="list-group" id="myFileContainer"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.