

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.
[html]<!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>[/html]
PHP para recibir datos:
[php] <?phpif (isset($_FILES[‘avatar’])) {
$_POST[‘avatar’] = $_FILES[‘avatar’][‘name’];
} else {
$_POST[‘avatar’] = ‘Sin imagen’;
}
print_r($_POST);
[/php]
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.