Pra ficar claro: isso aqui não é um tutorial. Vc precisa ter familiaridade com a metodologia do framework.
O código proposto nesta resposta faz basicamente uma requisição $_POST
pro method
json/index
passando os dados do form
e trata a resposta para mostrar tudo num alert
. OBS: em que pese vc tenha dito que não quer usar um form
, vc vai ter que fazer a requisição de uma maneira ou de outra, então, eu usei um form
pra organizar os dados. Aprofundando mais no JQuery
vc vai aprender a extrair os dados de qualquer tipo de elemento pra enviar.
Considerando a estrutura do CodeIgniter
constante da documentação, sugiro criar um Controller
que seja responsável apenas pelas respostas dos objetos JSON
. Ele vai servir para qualquer tipo de dado que vc queira recuperar, inclusive dados do banco:
Controller 'Json.php':
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Json extends CI_Controller {
/**
* Returns a JSON object
**/
function index() {
$alert = $this->input->post();
$this->output
->set_content_type('application/json')
->set_output(json_encode($alert));
}
}
Criado o controller
que vai responder com os objetos JSON
, crie os que vão usá-los:
Controller 'Pages.php':
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Pages extends CI_Controller {
public function index() {
$this->load->view('pages/index');
}
}
View 'pages/index:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function () {
//Comportamento do botao de envio
$('#submit').click(function () {
submit();
});
//Alteracao do comportamento do formulario de envio
$("#form").submit(function (e) {
e.preventDefault();
});
});
//Funcao que faz o request
function submit() {
//Envia um request POST para o method 'json/index';
$.post(
$("#form").attr("action"),//Captura a action do FORM
$("#form").serialize(),//Captura os dados do FORM
//Captura a resposta do PHP
function (resp) {
//Alterando os valores em elementos especificos
$('#alert-msg').html('Classe invocada: '+resp.class);
$('#alert-title').html('Mostrando a classe para o elemento #alert');
//Muda a classe do elemento #alert
$("#alert").attr('class', resp.class);
}
);
//Mostra o elemento #alert
$('#alert').css('display', 'block');
}
</script>
<style type="text/css">
/* Por padrao, oculta elementos com id = 'alert' */
#alert{
display:none;
}
</style>
</head>
<body>
<nav class="navbar"></nav>
<div class="container">
<p><b>Altere a classe do elemento #alert:</b></p>
<div id="alert" role="alert">
<strong id="alert-title">
</strong> <div id="alert-msg"></div>
</div>
<div class="col-lg-3">
<form action="json/index" id="form">
<select class="form-control" name="class">
<option value="alert alert-success">Success</option>
<option value="alert alert-info">Info</option>
<option value="alert alert-warning">Warning</option>
<option value="alert alert-danger">Danger</option>
</select>
<br>
<button class="btn btn-primary" type="button" id="submit">Alterar</button>
</form>
</div>
</div>
</body>
</html>
Observando o código constante da view
vc vai perceber que o que importa, neste caso, é o JavaScript
/JQuery
. Ele é que vai tratar o comportamento do form
, dos botões e a resposta obtida do method
json/index
e alterar os dados mostrados.
O código está comentado, e não deve ser difícil implementar ou alterar para atender às suas necessidades.