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.