Hola; en este post veremos como recoger los datos de un formulario con jquery y enviar una petición con ajax a un servidor php.
El servidor php envia un json como resultado y finalmente ajax recibe ese resultado y lo lanza en un alert.
1. Creamos el fichero "index.html" con un formulario.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="conexionServidor.js"></script>
</head>
<body>
<form id="formulario_prueba_ajax">
<input type="text" id="nombre">
<input type="submit" value="Enviar">
</form>
</body>
</html>
2. Creamos el fichero "conexionServidor.js" que contiene la recogida de datos del formulario y la petición ajax al servidor y muestra los mensajes que este devuelve.
$(document).ready(function() {
// Al pulsar el botón submit del formulario
$('#formulario_prueba_ajax').submit(function() {
// Obtengo los valores de los input de mi formulario
var nombre = $('#nombre').val();
var datos = {
'nombre' : nombre
}
// Hacemos la petición ajax
$.ajax({
type : 'POST',
url : 'servidor.php',
data : datos,
dataType : 'json',
success : success,
error : error
});
function success(data) {
var valor = data.mensaje;
alert(valor);
alert(data.saludo);
};
function error(){
alert("error");
}
// detiene el submit por defecto
return false;
});
});
3. Creamos el fichero servidor.php que recibirá lo que le mandamos por ajax y devuelve un json que será porcesado en la función success de conexionServidor.js
<?php
$nombre = $_POST['nombre'];
$data = array();
/ / aqui se hace cualquier procesamiento con la base de datos por ejemplo o cualquier otra cosa
$data['mensaje'] = $nombre." se ha conectado.";
$data['saludo'] = "Que disfrutes ".$nombre;
echo json_encode($data);
?>
Listo hemos terminado. Un saludo....hasta el próximo post.
