如何在php的产品网格中显示ajax响应? [英] How to show ajax response in a product grid in php?

问题描述

我有一个产品网格，最初显示网格中的产品列表.当我按类别搜索产品时，使用ajax调用，我只想在网格内仅显示该类别中的产品.如何输出此响应?

I have a product grid which initially show list of products in grid. When I search for product by category, using an ajax call I want to show only the products from that category inside the grid. How can I output this response?

产品网格:

     <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部分:

Here is my javascript part :

    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响应:

This is my ajax response:

[{…}]
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"

推荐答案

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

那应该为您带来想要的结果.

That should get you the result you want.

这篇关于如何在php的产品网格中显示ajax响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！