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=1Simples 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