Cargar contenido aleatorio ajax php mysql..

Como están usuarios de la red esta vez vamos a crear un pequeño script, que nos va a servir para mostrar contenido aleatorio ajax php mysql , de tal forma que se vaya actualizando la información sin necesidad de refrescar toda la página .

Utilizaremos como ejemplo una base de datos con artículos ingresados previamente por mi, un script para llamar al archivo php y cargar el contenido dentro de nuestra web, es sencillo y dinámico podrán mejorarlo y usarlo en sus futuros proyectos.

Manos a la obra vamos a utilizar los siguientes archivos:

 index.html

 cargar-contenido.php

 jquery.js

 bootstrap.css

index.html .-  Página principal que mostrará los artículos desde un archivo php, aquí enlazaremos los scripts y los estilos , vease el contenido y su breve explicación.

<<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cargar contenido al azar AJAX PHP MYSQL | dinámico</title>
<!--cargamos la librería jquery desde un CDN HOSTED-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<!--creamos un script para mostrar cargar-contenido.php-->
<script>
// mostrar el efecto dando clic
$(document).on('click', '.td-ajax-next-page', function(){ 
    // mostarmos loader img
    $('#loader-image').show();
    // fade out efecto 
    $('#destino').fadeOut('slow', function(){
        //cargamos la pagina
        $('#destino').load('cargar-contenido.php', function(){
            // ocultamos loader image
            $('#loader-image').hide(); 
            // fade in effect
            $('#destino').fadeIn('slow');
        });
    });
}); 
</script>
<!--enlazamos bootstrap este es solo para hacer responsive la pagina no lo usaremos para estilizarla-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--utilizamo fuentes de fontawesome arrow-->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<!--utilizaremos un estilo corto por eso lo e incluido dentro de la página-->
<style>
html, body {
    background: #000; 
    }
.td-next-prev-wrap{
    margin-top: 0;
    margin-bottom: 26px;
    position: relative;
    clear: both;
}
.td-next-prev-wrap a {
    display: inline-block;
    margin-right: 7px;
    width: 25px;
    height: 25px;
    line-height: 24px;
    border: 1px solid #dcdcdc;
    text-align: center;
    vertical-align: middle;
    font-size: 7px;
    color: #b7b7b7;
}
.td-next-prev-wrap .td-ajax-prev-page {
    padding-right: 1px;
}
.td-next-prev-wrap .td-ajax-next-page {
    padding-left: 2px;
}
.td-pb-span {
    display: block;
    min-height: 1px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
    position: relative;
}
.td_block_wrap {
    padding-bottom: 0;
    margin-bottom: 38px;
}
.block-title {
    border-bottom: 0;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 40px;
    color:#CCC;
}
.td-module-image {
    position: relative;
}
.td-module-thumb {
    height: auto;
}

.entry-title {
    font-size: 21px;
    line-height: 25px;
    margin: 0 0 6px 0;
    color:#FFF;
}
.td-excerpt {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 21px;
    color:#CCC;
    text-align:justify;
}
.overflow-hidden{
    overflow:hidden;
}
.display-none{
    display:none;
}
.imagen-center{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    background: #000; 
    opacity: .50;  
    z-index:666;
    }
</style>
</head>

<body>
<!--comenzamos-->
<div class="container">
<div class="row">

<!--ignorar esta columna-->
<div class="col-md-4">
<div align="center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6927159933673851"
     data-ad-slot="4576789529"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

<div class="col-sm-8 col-md-4">
  <div class="td-pb-span">
    <div class="td_block_wrap">
      <div class="td-next-prev-wrap">
        <h4 class="block-title">Articulos</h4>
        <!--en esta capa destino es donde mostraremos la carga de contenido-->
        <div id="destino"></div>
        <!--creamos un salto de línea-->
        <br>
        <!--arrow left-->
        <a class="td-ajax-prev-page" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
        <!--arrow right con el id enlaceajax el cual hará de referencia al script-->
        <a class="td-ajax-next-page" href="#" id="enlaceajax"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</div>

<!--ignorar esta columna-->
<div class="col-md-4">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6927159933673851"
     data-ad-slot="4576789529"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div class="row">
</body>
</html>

cargar-contenido.php .- Aqui crearemos la conexión y las consultas mysql para mostrar los resultados desde una base de datos.

<!--Para este ejemplo usaremos Mysqli OOP vease mas en su web http://php.net/manual/es/-->
<?php
/* 
* Titulo : Cargar contenido aleatorio ajax php mysql
* Creador: http://www.bloguero-ec.com
* Link: http://www.bloguero-ec.com/publicacion/cargar-contenido-aleatorio-ajax-php-mysql
*/
//forzamos a mostrar los caracteres con acentos ignorar esta línea
header('Content-Type: text/html; charset=ISO-8859-1'); 
//conexion a la base de datos
$la_conexion = new mysqli("localhost","root","password","basedatos");

// chequeamos la conexion
if (mysqli_connect_error()) {
    die('Falló al conectar MySQL: (' . mysqli_connect_errno() . ') '
            . mysqli_connect_error());
}

//contamos todo de tabla productos
$count_filas = $la_conexion->query("SELECT count(*) FROM tabla_productos");
//obtenemos una fila de resultado
$array_fila = $count_filas->fetch_row();
//almacenamos el resultado en un array
$fila = $array_fila[0];
//con la funcion rand creamos una variable aleatoria
$aleatorio = rand(0, $fila-1);
//creamos una nueva consulta y seleccionamos los campos a trabajar
$consulta_articulos = $la_conexion->query("SELECT id,imagen,titulo,descripcion FROM tabla_productos LIMIT $aleatorio, 1");

//creamos un while con la consulta
while($row = $consulta_articulos->fetch_row()){
    //almacenamos los datos en variables para ser usadas
    $id = $row[0];
    $imagen = $row[1];
    $titulo = $row[2];
    $descripcion = $row[3];
//ignoremos esta linea que nos sirve para mostrar las variables de array 
//echo '<pre>' .print_r($imagen).'</pre>';
} 
/* liberar el conjunto de resultados */
    $count_filas->close();
    $consulta_articulos->close();
    $la_conexion->close();

//mostramos los resultados en un estilo     
echo '
<div class="overflow-hidden">
 <!--aqui mostramos el loader y con javascript lo ocultamos una vez cargado-->
 <div class="imagen-center" id="loader-image"><img src="images/ajax-loader.gif" /></div>
</div>
<div class="td-module-image">
 <div class="td-module-thumb">
 <img src="images/'.$imagen.'" title="" >
 </div>
</div>
<h3 class="entry-title">'.$titulo.'</h3>
<div class="td-excerpt">'.$descripcion.'</div>
';
?>

jquery.js .- La librería jquery la puedes descargar desde su web de autor o utilizar sus CDN hosted alojadas a nivel mundial véase mas aquí .

bootstrap.css .- Este estilo lo puedes buscar desde su web de autor ..

 

DEMOSTRACIÓN