1

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:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>

    <form id="frm" action="index.php" method="post">
        <button id="list">Listar</button>
    </form>

</body>

<script type="text/javascript" src="index.js"></script>

</html>

Codigo index.js:

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

Codigo index.php:

<?php
include 'bd.php';

$conn = DB::getInstance() -> getConnection();
$regists = $conn -> prepare("select * from personas;");
$regists->setFetchMode(PDO::FETCH_ASSOC);
$regists->execute();

while ($regist = $regists->fetch()) {
    echo "CI: ".$regist['ci']."<br>";
    echo "Nombre: ".$regist['name']."<br>";
    echo "Apellido: ".$regist['second_name']."<br>";
    echo "Email: ".$regist['email']."<br><hr>";
}

?>

Codigo BD.php:

<?php

class DB{
    private static $instance = null;
    private $conn;

    private $host = 'localhost';
    private $user ='root';
    private $pass = '';
    private $name = 'persona';

    private function __construct(){
        $this->conn = new PDO("mysql:host={$this->host};
                               dbname={$this->name}", 
                               $this->user, 
                               $this->pass,
                               array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"))
                               or die("Error al establecer la conexion");
    }

    public static function getInstance(){
        if (!self::$instance) {
            self::$instance = new DB();
        }
        return self::$instance;
    }

    public function getConnection(){
        return $this -> conn;
    }

}


?>

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.

1
  • Veo dos cosas. Una que no necesitas el formulario para nada. Y dos que los datos los deberías recibir en la función success de la llamada ajax y no los estás usando. El parámetro e deben ser los datos. Quita el formulario e inspecciona el valor de e en la función success. Commented el 25 jun. 2019 a las 6:34

1 respuesta 1

1

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');
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.