Mostrar datos de Mysql usando PHP, AJAX y PDO

publicado por: Anonymous

Estoy aprendiendo a usar AJAX.
En este caso tengo una base de datos en mysql y me conecto a ella mediante PHP, PDO
y quiero que al hacer click en un boton me traiga todos los datos de una tabla de la base y me los muestre en pantalla sin recargar la pagina.
Por el momento mi codigo trae todos los datos de la base pero cuando los muestra me recarga la pagina entera.
Espero me puedan ayudar.
Codigo index.html:

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
    <meta charset="UTF-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
    <meta http-equiv="X-UA-Compatible" content="ie=edge">_x000D_
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>_x000D_
    <title>Document</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
    <form id="frm" action="index.php" method="post">_x000D_
        <button id="list">Listar</button>_x000D_
    </form>_x000D_
_x000D_
</body>_x000D_
_x000D_
<script type="text/javascript" src="index.js"></script>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Codigo index.js:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
    $('#list').click(function() {_x000D_
        var data = $('frm').serialize();_x000D_
        $.ajax({_x000D_
            type: "POST",_x000D_
            url: "index.php",_x000D_
            data: data,_x000D_
            success: function(e) {}_x000D_
        });_x000D_
        return false; //Evita la recarga_x000D_
    });_x000D_
});

_x000D_

_x000D_

_x000D_

Codigo index.php:

_x000D_

_x000D_

<?php_x000D_
include 'bd.php';_x000D_
_x000D_
$conn = DB::getInstance() -> getConnection();_x000D_
$regists = $conn -> prepare("select * from personas;");_x000D_
$regists->setFetchMode(PDO::FETCH_ASSOC);_x000D_
$regists->execute();_x000D_
_x000D_
while ($regist = $regists->fetch()) {_x000D_
    echo "CI: ".$regist['ci']."<br>";_x000D_
    echo "Nombre: ".$regist['name']."<br>";_x000D_
    echo "Apellido: ".$regist['second_name']."<br>";_x000D_
    echo "Email: ".$regist['email']."<br><hr>";_x000D_
}_x000D_
_x000D_
?>

_x000D_

_x000D_

_x000D_

Codigo BD.php:

_x000D_

_x000D_

<?php_x000D_
_x000D_
class DB{_x000D_
    private static $instance = null;_x000D_
    private $conn;_x000D_
_x000D_
    private $host = 'localhost';_x000D_
    private $user ='root';_x000D_
    private $pass = '';_x000D_
    private $name = 'persona';_x000D_
_x000D_
    private function __construct(){_x000D_
        $this->conn = new PDO("mysql:host={$this->host};_x000D_
                               dbname={$this->name}", _x000D_
                               $this->user, _x000D_
                               $this->pass,_x000D_
                               array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"))_x000D_
                               or die("Error al establecer la conexion");_x000D_
    }_x000D_
_x000D_
    public static function getInstance(){_x000D_
        if (!self::$instance) {_x000D_
            self::$instance = new DB();_x000D_
        }_x000D_
        return self::$instance;_x000D_
    }_x000D_
_x000D_
    public function getConnection(){_x000D_
        return $this -> conn;_x000D_
    }_x000D_
_x000D_
}_x000D_
_x000D_
_x000D_
?>

_x000D_

_x000D_

_x000D_

Desde ya muchas gracias.

Tecnicamente el post ya acabo pero me pide que escriba mas porque es mayoritariamente codigo y creo que se entiende bastante bien que es lo que quiero hacer… sepan perdonar esta ultima parte.

solución

En principio te conviene trabajar sobre el submit del formulario y no sobre el click de un botón, ya que el formulario se puede enviar de varias maneras. Esto siempre y cuando necesites para algo el formulario (que no parece ser el caso).

Por otro lado, probablemente te convenga devolver un JSON con todos los datos de la tabla y desde JS mostrar esa información como quieras.

index.php:

...

$resultados = [];
while ($regist = $regists->fetch()) {
    $resultados[] = [
        'ci'       => $regist['ci'],
        'nombre'   => $regist['name'],
        'apellido' => $regist['second_name'],
        'email'    => $regist['email'],
    ];
}

echo json_encode($resultados);

index.js:

$(document).ready(function() {
    $('#frm').on('submit', function (e) {
        e.preventDefault(); // Previene el envío del formulario

        // Variables
        var $form = $(this);
        var data = $form.serialize();
        var url = $form.attr('action');

        // AJAX
        $.post(url, data, function (response) {
            console.log(response); // Acá harás lo que quieras con la respuesta
        }, 'json');
    });
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.