Tutorial de página web con Ajax

Tutorial de página web
con Ajax
Integrantes:
Lugo Guerrero Alejandro Javier 933
Hernández Reyes Jazmín Idéate 1085
Márquez Delgado Sergio Armando
Jesús Alejandro Ibarra Cabello 723
Iván Arturo Izucar González
Profesor: Santiago Gómez Carpizo

Creando la estructura
Para comenzar haremos una estructura de
carpetas en donde guardaremos todos los
archivos necesarios, esto se guardara en una
carpetala cual tendrá el nombre que más te
guste y por último la colocaremos en el
directorio HTDOCS de la carpeta xampp.

Creando la estructura
Lo siguiente será crear un archivo HTML en la
carpeta que acabas de crear, este se llamara
index.htm así como la ilustración.
Dentro del archivo incluirás las librerías jquery,
bootstrap, etcétera, así como la siguiente
ilustración…

Creando la estructuraAhora dentro del head escribiremos algunos
parámetros de estilo para darle una buena
vista a la página.

Creando los elementos Web
El

siguiente paso será crear los elementos
donde el usuario insertara la información
(input, checkbuttons y radiobuttons).
En esta aplicación se requerirán los
siguientes campos: nombre, carrera, sexo,
estancia1, estancia2, estadía, correo,
fecha, matricula.
Para estoharemos un formulario en el
body del archivo, el cual tendrá al archivo
"php/formatoJson.php" como página de
envió de datos y el método que se usara
será post.

Creando los elementos
Web

Usaremos los siguientes elementos:
Un input de tipo text para el nombre
Un input de tipo email para el Correo electrónico
Un input de tipo text para la matricula
Un input de tipo Date para la fecha
Unselect para la carrera
2 input de tipo radio para el sexo
3 input de tipo checkbox para las estancias y
estadía.
Un botón de tipo submit para enviar los datos
Cada elemento debe tener un label encima con su
respectivo nombre.

Creando los elementos
Web

Creando los elementos
Web

Creando la función Ajax
Lo siguiente será crear las funciones
necesarias para que el envió de datos sea por
medio deAjax.
Primeramente empezaremos a programar las
funciones dentro del Head, aquí colocaremos
un script:

Creando la función Ajax
Dentro crearemos una función que se detone cuando el
documento este completamente cargado en el
navegador y dentro de la función hay 2 variables (pet y
met) las cuales contienen la página de envió de datos y
el método de envió.
Prosiguiendo se necesitara un evento el cualse detone
cuando se de clic al botón enviar (Submit) y con ello
otro evento que evite una acción por defecto y se vaya
directamente al archivo php que haremos después.

Creando la función Ajax
Dentro del evento submit, debajo del
preventDefault, colocaremos la función Ajax
con sus respectivas 4 funciones básicas y sus
atributos.

Creando la función Ajax
En la función beforeSend se
ejecutara elcódigo antes de hacer
la solicitud, aquí solo colocaremos
un spinner que por ser un servidor
local no se notara su existencia en
la aplicación.

Creando la función Ajax
Despues colocaremos los atributos necesarios para que
la funcion ajax haga la peticion.

En el url asignaremos la variable pet la cual contiene el
valor action que se definio con la direccion
"php/formatoJson.php", en type seasignara la variable
met la cual contiene el método de envio que en este
caso es post, y por ultimo en data se asignara toda la
información del formulario serializada

.

Creando la función Ajax
En la función success se ejecutara el código solo en el
caso que la petición haya sido respondida exitosamente
sin errores, en esta función haremos validaciones para
ver si la respuesta contiene algo y deesta forma
mostrar la imagen especificada así como los datos de
respuesta mostrados por medio de una función append,
sino solo se mostrara otra imagen.

Creando la función Ajax
En la función error solo se mostrara la imagen
de error pues no se respondió la petición.
En la función complete se ejecutara el
código de cualquier forma sea exitosa o no la
petición.
Por ultimo declararemos un atributo...