Guardar la informacion de un formulario en una base MySQL con AJAX de jQuery y PHP

Stay hungry, stay foolish

Steve Jobs

Hola a  todos en esta ocasión el ejemplo trata de como podemos guardar la información de un formulario en una base de datos y mostrar un mensaje con el resultado, utilizando AJAX de jQuery y el lenguaje PHP.

FORMULARIO HTML

El formulario que vamos a guardar es el siguiente.

<form id="frminformacion"><label> Nombre: </label>
 <input type="text" name="nombre" />

 <label> Apellidos: </label>
 <input type="text" name="apellidos" />

 <label> Sexo: </label>
 <input type="radio" name="sexo" value="f" /> Femenino
 <input type="radio" name="sexo" value="m" /> Masculino

 <label> Grado: </label>
<select name="grado"> <option value="1"> Primero </option></select>
<select name="grado"> <option value="2"> Segundo </option></select>
<select name="grado"> <option value="2"> Tercero </option></select>

 <input id="enviar" type="button" value="Enviar" /></form>


CODIGO JQUERY
Ahora vamos a ver el código jQuery que vamos a utilizar,  Lo primero es asignar el evento click al botón enviar,  con serielizeArray() lo que hacemos es crear un arreglo con todos los datos del formulario, los cuales enviaremos mediante ajax que esta configurado de la siguiente forma: el método de envío es POST, lo que espera como respuesta va a ser un JSON, el script php que procesará la petición se llama guardar.php y por ultimo se le pasan los datos del formulario. Una vez que regresa el resultado presentamos el mensaje en el elemento con id=”mensaje” y llamamos a la función limpiarformulario para borrar los datos

$(document).ready(function(){
	$("#enviar").click(function(){
		var formulario = $("#frminformacion").serializeArray();
		$.ajax({
			type: "POST",
			dataType: 'json',
			url: "guardar.php",
			data: formulario,
		}).done(function(respuesta){
			$("#mensaje").html(respuesta.mensaje);
		});
	});

    function limpiarformulario(formulario){

	$(formulario).find('input').each(function() {
	    switch(this.type) {
        	case 'password':
		    case 'text':
               	$(this).val('');
             	break;
       		case 'checkbox':
       		case 'radio':
           		this.checked = false;
       		}
    	});

    	$(formulario).find('select').each(function() {
       		$("#"+this.id + " option[value=0]").attr("selected",true);

   	});
	}
});

CODIGO PHP

El archivo que va a procesar la petición ajax se llama guardar.php y tiene el siguiente código, lo primero que hacemos es verificar si existe la variable nombre para saber si el formulario se envió por el clic del botón  una vez que verificamos esto almacenamos los datos del formularios en una variable, después creamos la consulta de inserción  creamos la conexión con la base de datos y ejecutamos la consulta, al final lo que hacemos es regresar un mensaje con el resultado de la consulta como JSON

if(isset($_POST["nombre"]))
{
    $nombre = $_POST["nombre"];
	$apellidos = $_POST["apellidos"];
	$sexo = $_POST["sexo"];
	$grado = $_POST["grado"];

	$consulta = "INSERT INTO tblalumno (nombre, apellidos, sexo, grado)VALUES('$nombre','$apellidos','$sexo',$grado)";

	$conexion = new mysqli("localhost","user","password","basedatos",3306);

	$respuesta = new stdClass();

	if($conexion->query($consulta)){
		$respuesta->mensaje = "Se guardo correctamente";
	}
	else {
		$respuesta->mensaje = "Ocurrió un error";
	}
	echo json_encode($respuesta);

}

Aquí les dejo el archivo de descarga, espero que les sea de utilidad.