Ejemplo completo usando AJAX PHP y jQuery

Ejemplo completo usando AJAX. En este artículo veremos el uso de AJAX para almacenar información en la base de datos MySQL sin refrescar la página web o sistema web. Además, el envío de datos podemos usar método POST o método GET según la necesidad del programador.

¿Qué es Ajax?

AJAX es una tecnología que nos permite realizar acciones en una página web que necesiten respuesta del servidor sin recargarla. Por lo tanto, conseguimos que nuestro sistema web sea dinámico y obtener un diseño más atractivo y potente a la hora de procesar información.

Ejemplos que podemos hacer con AJAX:

• Insertar registros a la base de datos
• Actualizar Registros
• Eliminar Registros
• Desplegar información en un autocomplete search

Ahora vamos a desarrollar una llamada AJAX a un fichero externo que ejecutará un proceso (Guardar información a MYSQL usando PDO). Sin embargo, aunque podemos hacerlo directamente con PHP, lo haremos para aprovechar la potencia que nos proporciona.

Ventajas del AJAX

• Mejor experiencia de usuario.
• Alta compatibilidad.
• Puede ser utilizada en cualquier plataforma y navegador
• Menor transferencia de datos cliente/servidor
• Optimización de recursos (tiempo de operaciones)
• Portabilidad y usabilidad (permite realizar una petición de datos al servidor y recibirla sin necesidad de cargar la página entera)

Ejemplo completo usando AJAX: ESTRUCTURA

A continuación, mostramos pequeño código que son vitales para el funcionamiento del ejemplo

A) Código jQuery

Este script se encargara de realizar la peticion Ajax al archivo PHP  (update.php) y por consiguiente este fichero realizara el registro de la informacion en MySQL

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click","#upSubmit", function(){
var valor = "update";
var nombre = jQuery('#nombre').val();
$('#Msg').html('<div class="loading"><img src="files/busy.gif" alt="loading" />&nbsp;&nbsp;Procesando, por favor espere...</div>');
$.ajax({
url:"update.php",
type:"POST",
cache:false,
data:{valor:valor,nombre:nombre},
success:function(data){
if (data ==1) {
jQuery('#nombre').val('');
$("#Msg").html("<div class='alert alert-success' role='alert'>Registrado.</div> ");

}else{
jQuery('#nombre').val('');
$("#Msg").html("<div class='alert alert-danger' role='alert'>Error.</div> ");
}
}
});
});
});
</script>

B) UPDATE.PHP

Archivo PHP que hará tres cosas al recibir información desde Ajax:

• Conexión con la base de datos MySQL
• Recibir las variables
• Insertar registros en una determinada tabla

<?php
$db = new PDO('mysql:host=localhost;dbname=prueba', 'root', '');

if(isset($_POST["valor"])){
$nombre = $_POST["nombre"];
$upSent = $db->prepare("INSERT INTO `clientes`(`nombre`)
VALUES (:nombre)"); 
$upSent->bindParam(':nombre', $nombre);
$upSent->execute();
if ($upSent->rowCount() > 0){
echo 1;
}else{
echo 0;
}
}
?>

C) FORMULARIO HTML

Se encargará de recoger los datos ingresados por el usuario final usará el atributo ID para gestionar los datos.

No necesitara declarar en la etiqueta FORM si el envío es GET o POST, porque en el AJAX podemos declarar el tipo de envío.

Para enviar el formulario hará uso del atributo ID con nombre «upSubmit» que llamará al Ajax para que procese la información.

 <form action="">
<div class="row"> 
<div class="col-md-4">
<h2 style="text-align: center;">Registrar clientes</h2>
</div>
</div>

<div class="row"> 
<div class="col-md-4">
<label for="">Nombre</label>
<input type="text" name="nombre" id="nombre" class="form-control">
</div>
</div>
<br>
<div class="row"> 
<div class="col-md-4">
<button id="upSubmit" type="button" class="btn btn-primary btn-block">Registrar!</button> </div>
</div>
<br>
<div class="row"> 
<div class="col-md-4">
<span class="text-danger align-middle" id="Msg"></span>
</div>
</div>
</form>

CONCLUSIÓN

Hemos utilizado los id de los input de texto para pasarle sus valores al AJAX. Por lo tanto, Ajax recogerá la información y lo enviará al fichero PHP y para el proceso podemos elegir el tipo type (POST o GET).

Ahora vemos el archivo de procesamiento de datos (update.php) que únicamente hará la conexión con MySQL usando PDO, Recogerá la información enviada por el AJAX y lo registrará en la base de datos mediante en método que hemos declarado ya sea POST o GET según corresponda.

De una manera sencilla hemos aprendido a usar AJAX y aprovechar al máximo sus excelentes ventajas.

Descargar ejemplo de uso del AJAX

1 archivo(s) 6.51 KB

Descargar