{"id":1334,"date":"2012-03-24T19:41:56","date_gmt":"2012-03-24T19:41:56","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1334"},"modified":"2019-08-14T11:12:32","modified_gmt":"2019-08-14T11:12:32","slug":"eliminar-registros-con-jquery-ajax-y-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/eliminar-registros-con-jquery-ajax-y-php\/","title":{"rendered":"Como eliminar registros con jQuery, Ajax y PHP"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como eliminar registros con jQuery<\/strong>, Ajax<\/strong> y PHP<\/strong> enviando los datos al servidor sin recargar la p\u00e1gina, ofreciendo de esta forma una mejor experiencia de usuario en tus aplicaciones o p\u00e1ginas webs.<\/p>\n

En una p\u00e1gina o aplicaci\u00f3n web din\u00e1mica que requiere de la interacci\u00f3n del usuario siempre puede ser interesante poder eliminar datos o registros que ya no se utilizan o ya no tienen importancia para liberar espacio en la interfaz y en la base de datos.<\/p>\n

Sit\u00faate en el caso de estar en una p\u00e1gina web en la que los usuarios pueden agregar productos en un carrito de compras.<\/p>\n

Paralelamente, puedes ofrecerle la posibilidad de eliminar estos productos para permitir al usuario corregir o actualizar su carrito.<\/p>\n

Una forma bastante din\u00e1mica y atractiva de hacerlo es utilizando una combinaci\u00f3n de las tecnolog\u00edas jQuery<\/strong>, Ajax<\/strong> y PHP<\/strong>.<\/p>\n

El jQuery<\/strong> es ideal para aplicar efectos.<\/p>\n

Ajax<\/strong> y PHP<\/strong> para actualizar los registros en la base de datos sin necesidad de recargar la p\u00e1gina.<\/p>\n

En el ejemplo en funcionamiento estoy visualizando unos registros que se recogen de una base de datos y el usuario tiene la posibilidad de eliminarlos.<\/p>\n

El ejemplo solo muestra el efecto de eliminaci\u00f3n pero no hace nada en la base de datos.<\/p>\n

De todas formas, en este tutorial puedes ver el c\u00f3digo para conseguirlo.<\/p>\n

C\u00f3digo HTML en tu archivo principal<\/h3>\n

Voy a empezar por el archivo principal o index.html, en el caso del ejemplo donde vamos a tener los elementos incrustados en el HTML<\/strong>.<\/p>\n

El ejemplo en funcionamiento no tiene una maquetaci\u00f3n o dise\u00f1o especial. Est\u00e1 basado en la tecnolog\u00eda Bootstrap 4<\/strong>.<\/p>\n

Dentro del cuerpo de la p\u00e1gina o dentro de la etiqueta <body> agrega el listado de elementos.<\/p>\n

Lo ideal es que se recojan de una base de datos.<\/p>\n

En el ejemplo en funcionamiento tan solo vamos a mostrar el c\u00f3digo HTML<\/strong> que no es m\u00e1s que algo como lo que sigue:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"item-1"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n            <h3<\/span><\/a>><\/span>What is Lorem Ipsum?<\/<\/span>h3<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/<\/span>p<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"btn btn-secondary delete"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"1"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-remove"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Eliminar<\/<\/span>a<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"item-2"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n            <h3<\/span><\/a>><\/span>Why do we use it?<\/<\/span>h3<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<\/<\/span>p<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"btn btn-secondary delete"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"2"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-remove"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Eliminar<\/<\/span>a<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"item-3"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n            <h3<\/span><\/a>><\/span>Where does it come from?<\/<\/span>h3<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.<\/<\/span>p<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"btn btn-secondary delete"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"3"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-remove"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Eliminar<\/<\/span>a<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"item-4"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n            <h3<\/span><\/a>><\/span>Where can I get some?<\/<\/span>h3<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/<\/span>p<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"btn btn-secondary delete"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"4"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-remove"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Eliminar<\/<\/span>a<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Tenemos 4 elementos con un bot\u00f3n para eliminar cada uno de ellos.<\/p>\n
Es importante que te fijes bien en los botones para eliminar. Tiene un class=\u00bbdelete\u00bb que usar\u00e9 para controlar el evento \u00abclick\u00bb de los mismos y un atributo \u00abdata\u00bb que contiene el identificador del elemento.<\/p>\n
Justo por encima de los elementos no te puedes olvidar agregar el contenedor que mostrar\u00e1 la alerta o mensaje de confirmaci\u00f3n de eliminaci\u00f3n correcta, inicialmente oculto:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-success"<\/span> style<\/span>=<\/span>"display:none;"<\/span>><\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Control del evento \u00abclick\u00bb que permite la eliminaci\u00f3n<\/h3>\n
La clave de eliminar registros con jQuery<\/strong> se puede agregar en la cabecera o justo antes de la etiqueta de cierre <\/body>.<\/p>\n
En la cabecera de la p\u00e1gina o dentro de la etiqueta <head> puedes agregar la carga de la librer\u00eda jQuery y la funci\u00f3n que controla el evento de los botones \u00abEliminar\u00bb:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script src="https:\/\/code.jquery.com\/jquery-3.2.1.js"><\/script>\n<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    $(<\/span>'.delete'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>\n        e.preventDefault<\/span>(<\/span>)<\/span>;<\/span>\n        var<\/span> parent =<\/span> $(<\/span>this<\/span>)<\/span>.parent<\/span>(<\/span>)<\/span>.parent<\/span>(<\/span>)<\/span>.attr<\/span>(<\/span>'id'<\/span>)<\/span>;<\/span>\n        var<\/span> item<\/span> =<\/span> $(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>'data'<\/span>)<\/span>;<\/span>\n \n        var<\/span> dataString =<\/span> 'item='<\/span>+<\/span>item<\/span>;<\/span>\n \n        $.ajax<\/span>(<\/span>{<\/span>\n            type:<\/span> "POST"<\/span>,<\/span>\n            url:<\/span> "process.php"<\/span>,<\/span>\n            data:<\/span> dataString,<\/span>\n            success:<\/span> function<\/span>(<\/span>response)<\/span> {<\/span>\t\t\t\n                $(<\/span>'.alert-success'<\/span>)<\/span>.empty<\/span>(<\/span>)<\/span>;<\/span>\n                $(<\/span>'.alert-success'<\/span>)<\/span>.append<\/span>(<\/span>response)<\/span>.fadeIn<\/span>(<\/span>"slow"<\/span>)<\/span>;<\/span>\n                $(<\/span>'#'<\/span>+<\/span>parent)<\/span>.fadeOut<\/span>(<\/span>"slow"<\/span>)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>                 \n}<\/span>)<\/span>;<\/span>    \n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior lo que hace es esperar a que alguno de los botones con class=\u00bbdelete\u00bb sea pulsado para eliminar el elemento.<\/p>\n
Mediante la llamada Ajax<\/strong> ejecuto el archivo process.php recibiendo mediante el m\u00e9todo POST los par\u00e1metros que le estoy enviando en el \u00abdata\u00bb.<\/p>\n
El success<\/em> de la llamada Ajax<\/strong> se encarga de vaciar el contenedor de la confirmaci\u00f3n para agregar el mensaje que vienen del servidor.<\/p>\n
Seguidamente, el elemento se oculta mediante fadeOut(). En este punto, quiz\u00e1s puede ser mejor utilizar la funci\u00f3n remove() para eliminar del DOM el elemento y no dejarlo oculto.<\/p>\n
Ejecuci\u00f3n en el servidor<\/h3>\n
El archivo process.php<\/em> puede contener algo como lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\n$connexion<\/span> =<\/span> new<\/span> mysqli(<\/span>'localhost'<\/span>,<\/span> 'USUARIO'<\/span>,<\/span> 'PASSWORD'<\/span>,<\/span> 'BASE DE DATOS'<\/span>)<\/span>;<\/span>\n \n$item<\/span> =<\/span> (<\/span>int)<\/span>$_POST<\/span>[<\/span>'item'<\/span>]<\/span>;<\/span>\n \n$connexion<\/span>-><\/span>query<\/span>(<\/span>'DELETE FROM items WHERE id_item = '<\/span>.<\/span>$item<\/span>)<\/span>;<\/span>\n \necho<\/span> 'Se ha eliminado correctamente el elemento con id='<\/span>.<\/span>$item<\/span>.<\/span>'.'<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Tan solo son 4 l\u00edneas de c\u00f3digo donde estoy:<\/p>\n