8
respostas

Como utilizar o AJAX no laravel.

Tenho uma tabela que quero que filtre pela categoria do produto via ajax sem reload. OBS: Estou usando JqueryDatatables. Routes

Route::get('/produtos/ajaxprod', [
        'uses'=>'ProdutoController@ajaxprod',
        'item_categoria'=>Input::get('item_categoria')
]);

View

  @extends('layout.principal')

@section('conteudo')
<script type="text/javascript">
    function ajaxprod(){
      $.ajax({
        'processing': true, 
        'serverSide': false,
          type: "GET",
          data: {item_categoria: $("#item_categoria").val()},
          url: "/produtos/ajaxprod",
          success: function(s) {
            var s = $(s);
            var table = $('#tableitem').DataTable();
            table.clear();
              for(var i = 0; i < s.length; i++) {
                   table.row.add([
                    s[i]['id'],
                    s[i]['nome'],
                    s[i]['quantidade'],
                    s[i]['valor'],
                    s[i]['tamanho'],
                    s[i]['descricao'],
                    s[i]['categoria_id'],
                ]);
              }
            table.draw();
          }
      });
    }
  </script>
<div>
<h2 class="text-center">Listagem de produtos</h2>
<hr/>
@if(old('nome'))
  <div class="alert alert-success">
    <strong>Sucesso!</strong> 
      O produto {{ old('nome') }} foi adicionado.
  </div>
@endif
</div>
<div>
  <a href="{{url('/produtos/novo')}}" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Cadastrar</a>
  <a href="{{url('/produtos/deletartudo')}}" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Deletar Tudo</a>
  <a href="{{url('/produtos/imprimir')}}" class="btn btn-primary"><span class="glyphicon glyphicon-print"></span> Gerar PDF</a>
  <a href="{{url('/produtos/exportar')}}" class="btn btn-primary"><span class="glyphicon glyphicon-print"></span> Gerar Planiha</a>
  <a href="{{url('/produtos/importar')}}" class="btn btn-success"><span class="glyphicon glyphicon-file"></span> Importar Planilha</a>
  <br><br>
</div>
<form>
<label>Categoria do Produto</label>
  <select id="item_categoria" onchange="ajaxprod()" name="categoria_id" data-placeholder="Selecione...." class="chosen" class="form-control">
      @foreach($categorias as $c)
            <option></option>
            <option value="{{$c->id}}">{{$c->nome}}</option>
      @endforeach
  </select>
<form>
  <br><br>
<div class="table-responsive">
<table id="tableitem" class="table table-striped table-bordered table-hover" style="font-size:12px;">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Quantidade</th>
      <th>Valor</th>
      <th>Tamanho</th>
      <th>Descrição</th>
      <th>Categoria</th>
      <th>Visualizar</th>
      <th>Editar</th>
      <th>Deletar</th>
    </tr>
  </thead>
  <tbody>
@foreach($produtos as $p)
      <tr class="{{$p->quantidade <=1 ?'danger': ''}} text-center">
        <td>{{ $p->id }}</td>
        <td>{{ $p->nome }}</td>
        <td>{{ $p->quantidade }}</td>
        <td>{{ $p->valor }}</td>
        <td>{{ $p->tamanho }}</td>
        <td>{{ $p->descricao }}</td>
        <td>{{ $p->categoria->nome }}</td>
        <td>
          <a href="/produtos/mostra/{{$p->id}}">
            <span class="glyphicon glyphicon-search"></span>
          </a>
        </td>
        <td> 
          <a href="/produtos/editar/{{$p->id}}"> 
            <span class="glyphicon glyphicon-pencil"></span>
          </a>
        </td>
         <td> 
          <a href="/produtos/remove/{{$p->id}}"> 
            <span class="glyphicon glyphicon-trash"></span>
          </a>
        </td>
      </tr>
  @endforeach
</tbody>
</table>
  <h4>
    <span class="label label-danger pull-right">
      Um ou menos itens no estoque
    </span>
 </h4>
</div>
@stop

Controller

public function ajaxprod(){
        $item_categoria = Request::input('item_categoria');
        $produtos = Produto::where('categoria_id',"=",$item_categoria)->get();
        $categorias = Categoria::orderBy('id')->get();
        return json_encode($produtos);
    }
8 respostas

Yuri, tudo bem? Desculpa pergunta, mas você está duplicando este tópico https://cursos.alura.com.br/forum/topico-como-utilizar-o-jquery-no-laravel-32512 ? É a mesma dúvida?

Oi Yuri, tudo bom?

Lembra que os metodos do nosso controller devem sempre retornar alguma reponse. No seu caso, você quer retornar uma response com json, certo?

$json = json_enconde($produtos);
return response()->json($json);

Assim você processa seu json com os dados de $produtos, do banco, e devolve uma response com esse json =)

Se você quiser saber mais sobre respostas http com json, você pode dar uma olhada aqui na documentação do laravel:

https://laravel.com/docs/5.4/responses#json-responses

Qualquer dificuldade, compartilha com a gente!

A dificuldade está como pegar na view e fazer com que ele carregue uma tabela com json.

function ajaxprod(){
      $.ajax({
        'processing': true, 
        'serverSide': true,
          type: "GET",
          data: {item_categoria: $("#item_categoria").val()},
          url: "/produtos/ajaxprod",
          datatype: "json",
          success: function(produtos) {
            alert(produtos);
          }

      });
    }

Então... como você está trabalhando com data tables, passando o json pelo response, você consegue pegar no javascript:

$(document).ready(function() {
    $('#IdDaTable').DataTable( {
        ajax : {
         url : 'suaRotaQueDevolveJson',
        type : 'POST'
    }
    } );
} );

Se você quiser, tem um lugar bem legal para consulta de como lidar com data-tables e php:

https://datatables.net/examples/index

function ajaxprod(){
      $(document).ready(function(){
          $('#tableitem').DataTable({
                ajax:({
                url : '/produtos/ajaxprod',
                type : 'GET',
                success: function(produtos) {
                  alert(produtos);
                }
              });
          });
      }
    }

Assim?

Fiz assim ainda não deu certo, eu consigo da um alert mais ele não monta uma tabela.

 function ajaxprod(){
      $.ajax({
        'processing': true, 
        'serverSide': true,
          type: "GET",
          data: {item_categoria: $("#item_categoria").val()},
          url: "/produtos/ajaxprod",
          datatype: "json",
          success: function(produtos) {
            var table = $('#tableitem').DataTable();
            table.clear();
            $.each(produtos,function(key,produto){
              table.row.add({
                  "id": produto.id,
                  "nome": produto.nome,
                  "quantidade": produto.quantidade,
                  "valor": produto.valor,
                  "tamanho": produto.tamanho,
                  "descricao": produto.descricao,
                  "categoria_id": produto.categoria_id,
              });
            table.draw();
            //alert(produto.id+"+"+produto.nome);
            });
          }
      });
    }

No Controller ficou assim.

 public function ajaxprod(){
        $item_categoria = Request::input('item_categoria');
        $produtos = Produto::where('categoria_id',"=",$item_categoria)->get();
        $categorias = Categoria::orderBy('id')->get();
        return $produtos;
    }

Lembra de retornar seus objetos em json pelo controller:

$json = json_enconde($produtos); // transforma em json
return response()->json($json); // retorna uma resposta com o json