Как показать ответ ajax в сетке продукта?

У меня есть сетка продуктов, изначально показывающая список продуктов в сетке. И когда я ищу продукт по категориям по вызову ajax, я показываю только продукт, который находится в этой категории внутри этой сетки. Я не мог понять, как мне показать ответ ajax в этой сетке.

Сетка продукта:

<div class="col-sm-9"> @foreach($products as $product) <div class="col-md-4"> <div class="products-gallery"> <h4>{{$product->name}}</h4> </div> </div> @endforeach </div> 

Вот моя часть javascript:

 jQuery('#searchId').on('change', function() { var category_id = jQuery(this).val() searchProduct(category_id) }) function searchProduct(category_id) { $.ajax({ method: 'get', url: "{{url('searchByCategory')}}", data: {'category_id' : category_id}, success: function(html){ $(".col-sm-9").html(html) }, error: function(jqXHR, textStatus, errorThrown) { console.log(JSON.stringify(jqXHR)); console.log("AJAX error: " + textStatus + ' : ' + errorThrown); } }); } 

Это мой ответ ajax:

 [{…}] 0: category_id:3 created_at:"2017-09-11 20:33:19" id:4 name:"HT 400 Triplex " updated_at:"2017-09-11 20:33:19" 

Solutions Collecting From Web of "Как показать ответ ajax в сетке продукта?"

 $(document).on('submit', 'form#yourFormID', function(event) { event.preventDefault(); $.ajax({ url: '/route/url', type: 'GET', dataType: 'html', data: {firstValue: 'foo', secondValue: 'bar'}, success: function(html){ $(".col-sm-9").html(html) //OR $(".col-sm-9").load(/route/url); } }); }); //route Route::get('/route/url', 'ControllerName@fetchDataAction'); //Controller public function fetchDataAction(Request $request){ $data = ModelName::where('foo', $request->get('firstValue'))->where('bar', $request->get('secondValue')); return view('result', ['products' => $data]); } //result.blade.php @foreach($products as $product) <div class="col-md-4"> <div class="products-gallery"> <h4>{{$product->name}}</h4> </div> </div> @endforeach 

Это должно дать вам результат, который вы хотите.