Postagem

Aqui é onde faço postagens de coisas que acho interessante.

CodeIgniter - Trabalhando com requisição ajax

Postagem do dia 11/08/2013 na categoria CodeIgniter



Vou mostrar como fazer requisição ajax usando o CodeIgniter. Vou criar uma aplicação simples, uma tela em branco com um botão para exibir a data e hora atual.

Criando o controller welcome.php


<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	/**
	 * __construct method
	 *
	 */	
	public function __construct()
	{
		parent::__construct();
		$this->load->helper('url');
	}	
	
	
	/**
	 * index method
	 * 
	 */
	public function index()
	{		
		$this->load->view('welcome/index');
	}
	
	
	/**
	 * ajaxGetDate method 
	 */
	public function ajaxGetDate()
	{		
		echo json_encode( array( 'date' => date( 'H:i:s' ) ) );
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */


Criando a view welcome/index.php


<!DOCTYPE html>
<html lang="en">
	<head></head>
	<body>
	
		<div id="container">
			<h1>Requisicao ajax</h1>
			
			<button>Pegar hora</button>
			<div id='result'></div>
		</div>
	
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
		<script type="text/javascript">
		    $( document ).ready(function() {
	
	                $('button').click(function(){
		
  	                      $.ajax({
	                          'url' : "<?php echo site_url('/welcome/ajaxGetDate')?>",
	                          'type' : 'GET',
	                          'success' : function(data){ 
	                              var result = JSON.parse( data );                             	                        
	                              $('#result').html( '<p>'+ result.date +'</p>' );
	                              $('button').html( 'Atualizar hora' );
	                          }
	                      });              
					
	                });
	
		    });
	     </script>	
	</body>
</html>



Após ter criado o controller e a view acesse http://localhost/codeigniter/welcome/ e clique no botão Pegar hora



Deixe seus comentários abaixo: