Voy a enseñar un método sencillo de cómo hacer una petición AJAX a un archivo php para que este le devuelva información al navegador sin tener que recargar la página y poder mostrársela al usuario, este método proporciona una agradable navegabilidad para el usuario pues interactúa con la pagina sin recargarla cada vez.
Imaginemos que un usuario en su cuenta, de una página de cursos on-line, tiene un menú en el cual le ofreces por ejemplo la información de los todos cursos que tiene. Entonces mediante AJAX haremos una petición a un archivo php pasándole la ID del usuario mediante POST o GET, el archivo php recogerá la variable ID enviada por AJAX, la procesará, buscará en la base de datos cuantos cursos tiene o si no tiene ninguno, le devolverá la información en formato Json de nuevo a nuestra petición AJAX y después usando jQuery se los mostraremos al usuario.
Este es el archivo javascript.
$(document).ready(function(){
//cunado en un boton o enlace con el id="cursos" se haga click
$("#cursos").click(function(e){
e.preventDefault();//anulamos la propagación del enlace
$.ajax({
url: 'cursos.php' ,//indicamos la ruta al archivo
type: 'GET', // el metodo POST o GET
data: {id:5}, //los datos a enviar
success: function( result ){
let cursos;
if(result != 0){
cursos = JSON.parse(result);
}else{
cursos = false;
}
if(cursos){
//apuntamos al id mostrarCursos para mostrar la información alli.
$("#mostarCursos").text(cursos);
}
else
{
$("#mostarCursos").text('No tiene cursos');
}
},
error: function() {
alert('Hubo un error en la petición');
}
});
});
});
Y ahota el archivo php.
<?php
if(isset($_GET['id'])){
$idUser = $_GET['id']; // hay sanitizar variable por temas de seguridad
$db = new conexxion();// conectamos a la base de datos
$sql = " SELECT cursos FROM usuarios WHERE id_user = '$idUser' ";
$dataCourse = $db->read($sql);//obtenemos un objeto de los cursos de la base por ejemplo en un STRING separados por comas, un array
if ($dataCourse){
echo json_encode($dataCourse);// hacemos un echo y convertimos a Json los datos para que la peticion AJAX recoja la información
}else{
echo json_encode('0');
}
}