Ajax sencillo con PHP y jQuery

¡Comparte nuestro contenido!

Ajax es un técnica que permite crear aplicaciones que se ejecuten en el cliente, es decir el navegador, mientras se mantiene la comunicación con el servidor en segundo plano. De manera que es posible enviar datos sin necesidad de recargar ningún archivo. Ajax usa la interfaz XMLHttpRequest actualmente soportada en los navegadores, para hacer las peticiones.

Por otro lado, jQuery es una librería simple que permite utilizar javascript de manera más sencilla al acortar o encapsular el manejo de los objetos y eventos.

Realizando una aplicación con Ajax

Por supuesto, vamos a realizar una pequeña aplicación que ponga a prueba estás dos tecnologías. Iniciemos con un formulario como este.

<h1>Enviando datos de forma asíncrona con AJAX</h1>
<p>Por favor, introduce los siguientes datos</p>
<form>
   <p><label>¿Cuál es tu nombre?</label> <input type="text" id="txtNombre" required /></p>
   <p><label>¿Nos das tu correo?</label> <input type="email" id="txtCorreo" required /></p>
   <p><label>¿Cómo escuchaste de nosotros?</label> <select id="cmbMedio">
      <option value="1">Facebook</option>
      <option value="2">Twitter</option>
      <option value="3">Whatsapp</option>
      <option value="3">Un amigo</option>
   </select></p>
   <p><input type="checkbox" id="chkPeticion" /> <label>¿Quieres recibir nuestro contenido en tu email?</label></p>
   <p><input type="submit" value=" Aceptar " id="btnOk" /></p>
</form>

El cual, luce así:

Ahora, coloquemos un <div> para recibir la respuesta.

<div id="respuesta"></div>

Colocando jQuery en nuestra aplicación

Entrando a su sitio web, encontramos la versión actual de jQuery (3.3.1 al momento de escribir este artículo) Tenemos dos opciones, la versión compacta para producción (compressed) o la versión no compacta para desarrollo (uncompressed) Descarguemos la versión compacta en la carpeta de nuestro proyecto.

Ahora, la añadimos a nuestro archivos en edición

<script src="jquery-3.3.1.min.js" type="text/javascript">
</script>

O, podemos evitar su descarga utilizando la versión directa del CDN de jQuery con el código que ellos recomiendan.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

Hagamos un archivo javascript para todo el código siguiente, llamaremos a este archivo ajax.js (el nombre ajax no es obligatorio) Una vez creado, lo agregamos a nuestra lista de archivos, justo debajo de la llamada a jQuery.

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

Trabajando con Ajax

Utilizamos el shorthand para document.ready

$(function(){    
});

Manipulamos el evento click de nuestro único botón.

$("#btnOk").click(function(evt){
});

Evitamos que haga Submit por medio del argumento de tipo Event que tiene.

evt.preventDefault();

Capturamos los datos que vienen del formulario en variables Javascript, las cajas de texto y el combobox pueden capturarse con el método val(), mientras que el checkbox lo revisaremos con el método prop().

var nombre = $("#txtNombre").val();
var correo = $("#txtCorreo").val();
var opcion = $("#cmbMedio").val();
var peticion = false;
if($("#chkPeticion").prop("checked")) peticion = true;

IMPORTANTE: No es recomendable validar, ni verificar las variables por javascript, una mejor práctica consiste en hacer que ya sea el gestor de la base de datos, o el lenguaje usado en el servidor lo hagan.

Iniciamos el objeto Ajax.

$.ajax({
});

Trabajemos con los valores de ese objeto. Primero carguemos la URL del archivo PHP que va autilizar nuestras variables

url: "datos.php",

Luego elegimos el médoto a utilizar, POST para mayor garantía

method: "POST",

Después, colocamos las variables con los nombres que llevaran en el archivo PHP

data: { nom: nombre, cor: correo, opc: opcion, pet: peticion },

Si la petición falla, tenemos tres argumentos para manipular: un objeto XMLHttpRequest con los valores asociados al status de la petición, un código de estado y un mensaje de error.

error: function(request, errorcode, errortext){
}

Aquí por ejemplo, en caso de error, haremos que el <div> nos entregue esa información.

$("#respuesta").html("<p>Ocurrió el siguiente error: <strong>" + errortext + "</strong></p>");

Si probamos en este momento, obtendremos el siguiente error:

Necesitamos el método success() en caso de que todo haya salido bien. Este método tiene tres argumentos: los datos generados por la respuesta, un texto con el status de la petición y un objeto XMLHttpRequest con los valores asociados al status de la petición.

success: function(dataresponse, statustext, response){
}

Ahí dentro, necesitamos una variable para enviar mensajes.

var mensaje = "";

Si los datos de respuesta son favorables (el valor puede es generado por uno mismo) creamos un mensaje de respuesta.

if(dataresponse=="ok") mensaje = "Gracias por sus datos.";

En caso contrario, creamos un mensaje distinto

else mensaje = "Faltan algunos datos, revise por favor.";

Cualsea nuestro mensaje, lo mostramos en el <div> de respuesta

$("#respuesta").html("<p><strong>" + mensaje + "</strong></p>");

Procesamos los datos con PHP

Ahora que ya terminamos de usar Ajax, vamos a procesar los datos y enviar la respuesta que necesitamos. En este caso y para mantenerlos simple haremos lo siguiente: Si los datos están completos enviaremos un simple “ok”, ya que es lo que programamos en el objeto Ajax. El contenido del archivo datos.php es el siguiente:

Si el conteode los valores de $POST es diferente de 4, matamos el proceso.

if(count($_POST)<>4) die("Error al procesar datos");

en caso contrario.

else{
}

Dentro de ese else, lo primero será tomar las variables que enviamos

$nombre = $_POST["nom"];
$correo = $_POST["cor"];
$opcion = $_POST["opc"];
$peticion = $_POST["pet"];

Utilizaremos una variable boolean iniciada en true, esta variable sólo pasará a false si el nombre tiene menos de 3 caracteres o si el correo electrónico tiene menos de 5 caracteres

$correcto = true;

Si la longitud de la variable $nombre después de pasarla por trim es menor a 3…

if(strlen(trim($nombre))<3){
   $correcto = false;
}

Hacemos lo correspondiente con la variable $correo

if(strlen(trim($correo))<5){
   $correcto = false;
}

Finalmente, si correo no cambió a false, significa que todo esta bien, en caso contrario enviamos un dato diferente.

if($correcto) echo "ok";
else echo "no ok";

Por lo cual, si probamos nuestro ejemplo con los datos completos, nos debe arrojar el resultado correcto.

Descarga el código fuente

Si quieres probar el código completo, o te perdiste en alguno de los pasos y quieres revisar el código, puedes hacerlo dando clic aquí.

Xamus Dyson

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

www.cablenaranja.com

¡Comparte nuestro contenido!