Como excluir linhas em MySQL usando Ajax e jQuery

Escrito por max power | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como excluir linhas em MySQL usando Ajax e jQuery
Use técnicas do AJAX para remover uma linha de dados sem ter que atualizar uma página web inteira (Comstock/Comstock/Getty Images)

O framework jQuery do JavaScript pode remover uma linha de dados de uma tabela sem ser preciso carregar novamente uma página web inteira. Usando técnicas do AJAX, o jQuery executa um script PHP que removerá os dados de um banco de dados do MySQL e atualizará um site para excluí-los visualmente também.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Incorpore o jQuery à sua página. Você poderá encontrar a última versão no site do jQuery ou conectando-se à API da Google. Um exemplo de como fazer isso usando a API é:

    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

  2. 2

    Escreva o código HTML necessário para mostrar seus dados. Associe um evento a cada elemento de dados. A amostra de código abaixo cria uma lista de compras com dois itens em uma tabela HTML. Os dados de cada elemento se organizam em três células. A primeira contém o nome do elemento, a segunda contém o preço e a terceira mostra a imagem de um botão "excluir". Cada linha possui um identificador único para que a função do jQuery possa identificá-las e excluí-las.

    <table> <tr id="1"> <td>Leite</td><td>R$7,99</td><td><button class="excluirelemento"><img src="botaoexcluir.gif"></button></td> </tr>

    <tr id="2"> <td>Pão</td><td>R$3,99</td><td><button class="excluirelemento"><img src="botaoexcluir.gif"></button></td> </tr> </table>

  3. 3

    Codifique a função do jQuery para gerenciar a chamada ao evento "excluir". Obtenha o identificador do elemento pai daquele que deve ser eliminado. Use o método AJAX do jQuery para passar o elemento a ser apagado para seu script. Considere a seguinte função, que "escuta" à ação "excluirelemento", captura o valor "id" do elemento TR mais próximo e executa "meu_script_excluir.php" usando o método POST, para passar o valor do "id" ao script. Depois da execução do script, o método "remove" do jQuery é usado para remover a linha da tela.

    jQuery(document).ready(function(){

    $(".excluirelemento").click(function(){ var pai = $(this).closest('TR'); var id = parent.attr('id'); $.ajax({ type: "POST", data: "id=" +id, url: "meu_script_excluir.php", success: function(msg){ $('#'+id).remove(); } });

    }); });

  4. 4

    Escreva o código em PHP. Ele deverá abrir o banco de dados MySQL e executar uma consulta do tipo "delete". A amostra de código abaixo verifica que a variável "id" tenha sido passada para o arquivo e, em caso afirmativo, a consulta "delete" executa e exclui a linha.

    <? mysql_connect("localhost", "seuNomeUsuario", "suaSenha") or die(mysql_error()); mysql_select_db("seuBancoDeDados") or die(mysql_error());

    $id = $_POST[id];

    if (isset($id)) {

    $query = "DELETE FROM tabela WHERE id = '$id'"; mysql_query($query) or die('Erro, a consulta INSERT falhou'); }

    ?>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível