如何在 php 的产品网格中显示 ajax 响应？

Question

我有一个产品网格，最初在网格中显示产品列表。当我使用 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"

Answer 1

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

这应该会得到你想要的结果。