Continuemos con la segunda parte del post jQuery Form Plugin, para esta práctica utilizaremos el método ajaxSubmit, además se definirá el objeto ajax con la configuración de nuestra petición.
<pre>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQueryFormPlugin | Tutorial</title>
<!--Cargamos Bootstrap para una mejor presentación (opcional)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Práctica jQuery Form Plugin
<small>::Formularios AJAX más fácil::</small>
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form id="formulario" class="form"> <!--Innecesario definir más atributos-->
<div class="form-group">
<label>Nombre:</label>
<input type="text" class="form-control" name="nombre" value="Dennis Ritchie">
</div>
<div class="form-group">
<label>Edad:</label>
<input type="number" class="form-control" name="edad" value="64">
</div>
<div class="form-group">
<label>Contraseña:</label>
<input type="password" class="form-control" name="password" value="01248">
</div>
<div class="form-group">
<label>Género:</label>
<div class="radio">
<label>
<input type="radio" name="genero" value="masculino" checked>
Masculino
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="genero" value="femenino">
Femenino
</label>
</div>
</div>
<div class="form-group">
<label>Lenguajes que utilizas:</label>
<div class="checkbox">
<label>
<input type="checkbox" name="lenguajes[]" value="PHP" checked>
PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="lenguajes[]" value="JavaScript">
Javascript
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="lenguajes[]" value="Swift" checked>
Swift
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="lenguajes[]" value="Python">
Python
</label>
</div>
</div>
<div class="form-group">
<label>S.O. que utilizas:</label>
<select class="form-control" name="so">
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux" selected>Linux</option>
</select>
</div>
<div class="form-group">
<label>Avatar:</label>
<input type="file" name="avatar">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Envíar">
</div>
</form>
</div>
</div>
</div>
<!--Cargamos la libreria jQuery (necesario)-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!--Cargamos la libreria del plugin (necesario)-->
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$('#formulario').submit(function (e) {
e.preventDefault();
var options = {
url: 'recibir.php', //El "action" del form
type: 'post', //El "method" del form
dataType: 'json', //El formato en que la respuesta sera recibida
clearForm: true, //Limpia el formulario una vez envíados los datos
success: function (response) { //Si la respuesta fue satisfactoria aqui es donde llega
console.log(response);
}
};
$(this).ajaxSubmit(options);
});
</script>
</body>
</html>
</pre>
PHP para recibir datos:
<?php
if (isset($_FILES['avatar'])) {
$_POST['avatar'] = $_FILES['avatar']['name'];
} else {
$_POST['avatar'] = 'Sin imagen';
}
print_r($_POST);
Consideraciones:
- Para utilizar el método ajaxSubmit requerimos definir el evento submit del formulario, y además evitar la recarga de la página ya sea con e.preventDefault o con un return false al final de la función.
- Debemos crear el objeto de las opciones AJAX, observen que este objeto options es el mismo objeto que requiere la función $.ajax en jQuery. Como minimo debemos definir una URL y un TYPE.
- Para habilitar el envío de archivos la etiqueta <form> debe tener el atributo enctype=”multipart/form-data”, pero al utilizar el método ajaxSubmit ya no es necesario especificarlo.
- A diferencia del objeto $.ajax de jQuery al usar esta librería no necesitamos definir el atributo data, el mismo método ajaxSubmit se encarga de ello.
El uso de esta librería para realizar peticiones AJAX no es imperativo ni es la única forma de hacerlo, simplemente es para construir nuestras peticiones de una forma más fácil en conjunto con jQuery. Si estas interesado en aprender otras formas de realizar peticiones AJAX puedes ver el objeto XMLHttpRequest en la documentación de Mozilla Developer Network, o también puedes aprender a utilizar el objeto $.ajax integrado en la misma librería de jQuery en este enlace.
Para serializar los datos de un formulario también puedes usar el método serialize() o serializeArray() (ejemplo). O bien podrías usar el objeto FormData nativo de JavaScript (ejemplo).
Puedes descargar los documentos utilizados desde el repositorio del blog en mi github: https://github.com/eichgi/blog-hoclabs
Si tienes algún comentario o aclaración por favor comenta.
