Solicitação jQuery Ajax no Codeigniter

Nesse post vou te mostrar uma coisa que eu adoro e uso muito por aqui: Solicitação Ajax com jQuery no Codeigniter.

Na verdade, não só no Codeigniter, mas em qualquer outro framework ou solução que permita usar jQuery e Ajax.

Se você está aqui lendo isso, provavelmente já sabe o que é Ajax, então não vou me delongar explicando a respeito dele.

Segundo a Wikipédia:

Ajax é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. 

Pro nosso exemplo aqui, resumidamente, é a forma como vamos fazer consulta no banco de dados MySQL e retornar registros sem recarregar a página.

Para isto, vamos usar o jQuery para facilitar ainda nessa missão que vamos executar sob o capô do Codeigniter 3, para torná-lo ainda mais poderoso.

Vamos criar uma tabela no banco de dados chamada “produtos” e vamos mostrar os dados numa view.

Então, bora codar…

Passo 1: Criar Tabela

O primeiro passo é criar uma tabelinha simples para gravar alguns registros, então aqui vai o SQL:

CREATE TABLE IF NOT EXISTS `produtos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(255) NOT NULL,
  `descricao` varchar(255) NOT NULL,
  `criado_em` datetime NOT NULL,
  `atualizado_em` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1

Simples assim…

Passo 2: Criar a Rota

Vamos precisar rotear para que a nossa busca com ajax possa funcionar e também nossa view, fazendo a seguinte atualização em routes.php:

//application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['ajax-request'] = 'ProdutosController/ajaxRequest';
$route['ajax-requestPost']['post'] = 'ProdutosController/ajaxRequestPost';

Criada a route, agora vamos criar nosso Controller:

Passo 3: Criar o Controller

Nesse passo, vamos criar nosso controlador chamado ProdutosController para realizar a tarefa de buscar no BD os registros para passar pro Ajax.

Então, criaremos um arquivo chamado ProdutosController.php dentro da pasta de Controllers: application/controllers.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class ProdutosController extends CI_Controller {

   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function __construct() {
      parent::__construct();
      $this->load->database();
   }


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function ajaxRequest()
   {
       $data['data'] = $this->db->get("items")->result();
       $this->load->view('itemlist', $data);
   }


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function ajaxRequestPost()
   {
      $data = array(
            'title' => $this->input->post('title'),
            'description' => $this->input->post('description')
        );
      $this->db->insert('items', $data);


      echo 'Adicionado com sucesso.';  
   }
}

Beleza! Dois métodos criados para retornar e para adicionar/postar, respectivamente.

Passo 4: Criar uma View

Agora que temos nosso Controller e também nossa tabela, vamos criar um arquivo de visualização (view) no diretório application/views:

</head>
<body>
<div class="container">
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h1>Codeigniter + Ajax</h1>
        </div>
    </div>
</div>

<div class="row">
  <div class="col-lg-8">
    <strong>Nome:</strong>
    <input type="text" name="nome" class="form-control" placeholder="Nome">
  </div>
  <div class="col-lg-8">
    <strong>Descrição:</strong>
    <textarea name="descricao" class="form-control" placeholder="Descrição"></textarea>
  </div>
  <div class="col-lg-8">
    <br/>
    <button class="btn btn-success">Enviar</button>
  </div>
</div>


<table class="table table-bordered" style="margin-top:20px">


  <thead>
      <tr>
          <th>Nome</th>
          <th>Descrição</th>
      </tr>
  </thead>


  <tbody>
   <?php foreach ($data as $item) { ?>      
      <tr>
          <td><?php echo $item->nome; ?></td>
          <td><?php echo $item->descricao; ?></td>
      </tr>
   <?php } ?>
  </tbody>


</table>
</div>


<script type="text/javascript">
    $("button").click(function(){

       var nome = $("input[name='nome']").val();
       var descricao = $("textarea[name='descricao']").val();

        $.ajax({
           url: '/ajax-requestPost',
           type: 'POST',
           data: {nome: nome, descricao: descricao},
           error: function() {
              alert('Ops! Deu ruim...');
           },
           success: function(data) {
                $("tbody").append("<tr><td>"+nome+"</td><td>"+descricao+"</td></tr>");
                alert("Cadastrado com sucesso");  
           }
        });

    });

</script>

</body>
</html>

Basicamente é só isso para usarmos jQuery Ajax no Codeigniter… o que achou?

Espero ter ajudado você! Se sim, deixe um comentário abaixo.

Até o próximo post!

Grande abraço