Consulta información de un CP con JQuery (AJAX)
Código completo para consultar información de un Código Postal con JQuery
Joel Rojas
Última actualización hace 2 años
Este es un tutorial sencillo, pero funcional de como consumir la API de COPOMEX desde un código HTML sencillo, con JQuery (AJAX).
Para ello se debe tener conocimiento de las siguientes tecnologías:
- HTML
- Boostrap 4
- Jquery
1. Se deberá crear una estructura básica de código HTML
2. Agregamos los archivos de Jquery y Bootstrap a nuestro código HTML
3. Creamos nuestro formulario HTML y un botón para traer los datos de la api de COPOMEX.
4. Agregamos un nuevo campo en el form, para poner nuestro token de COPOMEX.
4.1 Nuestro código se verá así:
5. Hasta ahora, nuestro código no hace nada, solo se visualizará de la siguiente forma:
6. Empezaremos a hacer el código Javascript con la librería JQuery.
Primeramente, haremos una función llamada "informacion_cp" para que al momento de dar clic al botón previamente creado, se ejecute esa función.
6.1 Agregamos el método ajax, de JQuery, que hará la llamada a la api de COPOMEX
6.2 En caso de que la petición a la API COPOMEX ha sido correcta, dentro del callback success se procesará la información obtenida y se colocará en los inputs correspondientes.
6.3 En caso de que la petición tenga error, dentro del callback error, pondremos nuestro código para dar a conocer que tipo de error es al usuario.
6.4 Opcionalmente, en el callback complete, se puede poner un código adicional, que se ejecutará independiente si se completó la solicitud, hubo error o no.
6.5 El código final Javascript quedará de la siguiente forma:
7. Código Completo:
8. Ejemplo del código en vivo, donde puedes probar tu token de proyecto.