Neste artigo abordaremos um dos métodos de deletar dados de um banco de dados através da seleção do checkbox e sem o refresh de página.

Utilizaremos as seguintes ferramentas web:

HTML5, CSS, JQUERY, PHP e MYSQL

  1. No HTML5

Linkaremos os arquivos externos e incluiremos nosso arquivo de exibição de dados.

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Deletando dados sem refresh</title>

<script src=”jquery-2.1.4.min.js”></script>

<script src=’javascript.js’></script>

<link rel=’stylesheet’ href=’stylesheet.css’>

</head>

<body>

<div id=’resultado’>

<?php include (‘exibicao.php’); ?>

</div>

</body>

</html>

  1. No MYSQL

Criaremos uma tabela cargos e vamos inserir alguns valores nela.

CREATE TABLE `cargos` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`cargo` text,

`nome` text NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

INSERT INTO `db_mysqli`.`cargos` (`id`, `cargo`, `nome`) VALUES (‘1’, ‘juiz’, ‘rui’), (‘2’, ‘professor’, ‘vani’);

  1. No PHP

Criaremos três arquivos, um exibicao.php, deletar.php e conexao.php.

3.1 Arquivo de conexão ao banco de dados

<?php

$servidor=’localhost’;

$usuario=’root’;

$senha=”;

$db=’db_mysqli’;

$mysqli= new mysqli($servidor,$usuario,$senha,$db);

?>

3.2 Arquivo de exibição dos dados

Criaremos o formulário para deletar os dados e a tabela de exibição dos dados.

<form id=’form1′>

<table>

<thead>

<tr>

<td>Ação</td>

<td>ID</td>

<td>Cargo</td>

<td>Nome</td>

</tr>

</thead>

<tbody>

<?php

include (‘conexao.php’);

$sql=$mysqli->prepare(‘select * from cargos’);

$sql->execute();

$sql->bind_result($id,$cargo,$nome);

while ($sql->fetch())

{

echo ”

<tr>

<td><input type=’checkbox’ value=’$id’ name=’checkbox[]’ id=’checkbox[]’></td>

<td>$id</td>

<td>$cargo</td>

<td>$nome</td>

</tr>

“;

}

?>

</tbody>

</table>

<input type=’submit’ value=’Deletar’ />

</form>

3.3 Arquivo para deletar os dados

Esse arquivo será responsável por deletar os dados no banco e retornar a página exibição à pagina index. Nós utilizaremos o foreach para receber os valores do nosso checkbox que é um vetor.

<?php

include (‘conexao.php’);

foreach ($_POST[‘checkbox’] as $checkbox)

{

$sql=$mysqli->prepare(‘delete from cargos where id = ?’);

$sql->bind_param(‘i’,$checkbox);

$sql->execute();

}

include (‘exibicao.php’);

?>

  1. No JQuery

O JQuery faz a função de enviar os dados e retorná-los sem o refresh de página. Lembrando que como será feita mais de uma requisição via ajax, é necessário utilizar a função on, para delegar o evento submit ao nosso formulário.

$(document).ready(function(){

$(document).on(‘submit’,’#form1′, function(event){

event.preventDefault();

var dados = $(this).serialize();

$.ajax({

url: ‘deletar.php’,

type: ‘POST’,

dataType: ‘html’,

data: dados,

success: function(data){

$(‘#resultado’).empty().html(data);

}

});

});

});

  1. Conclusão

Apagar um dado com checkbox é bem simples e rápido, e o uso do JQuery faz com que não seja necessário a atualização de página para isso.

  1. Artigos Relacionados

6.1 Busca sem refresh

6.2 Enquete sem refesh

6.3 Trocando fotos sem refresh

 

Autor: Thiago Arteweb