Enviar datos por método POST a PHP con Formulario HTML/JAVASCRIPT (#4 Fetch API)

Veamos como procesar un formulario con Fetch api de Javascript enviando sus datos mediante POST a un archivo PHP, esta es una forma nueva muy parecida a nuestro AJAX de siempre (AJAX alternativa 2018).
¿Necesitas un curso en Udemy?
Al comprar cualquier curso en Udemy con el siguiente enlace bit.ly/2OQr3gM estarás apoyando a bluuweb 😍
Aquí puedes revisarlos: bit.ly/2OQr3gM
Enviaremos los campos del input a través de FormData utilizando Fetch Api y obtendremos una respuesta en formato JSON desde PHP, todo esto lo realizaremos utilizando POST, así nuestra transferencia de archivos será muy segura.
Curso de FETCH API: goo.gl/DfY7Qf
Curso de PHP y MySQL: goo.gl/kd7T7F
Documentación oficial de Fetch Api: developer.mozi...
Suscríbete aquí: / bluuweb
Descarga los archivos del curso aquí: goo.gl/4tZAZb
¿Quiéres apoyar el canal?
Curso de Bootstrap 4 PREMIUM!
Accede con un súper descuento aquí: goo.gl/VQZwKg
Espero contar con tu apoyo, ya que estos canales de ingresos me ayudan a que pueda seguir subiendo contenido a mi canal de KZbin! GRACIAS!! :)
¿Necesitas crear formularios de contacto con PHP?
Ingresa a mi curso PREMIUM a solo $15 dólares aquí: goo.gl/K2SKWZ
No olvides suscribirte a este hermoso canal y destruirme en los comentarios :)
También puedes seguirme en Facebook: / bluuweb
Finalmente visita mi sitio web: www.bluuweb.cl 👌 Discord: / discord Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b

[@angelamquinonesgarcia5210]

Estoy impactada la facilidad con la que haces ver todo este tema de programación!!! Habia mirado cursos y nada, aqui todo esta clarooo.. GRACIAS

[@dejanstancovic7466]

holaaa

[@angelamquinonesgarcia5210]

@@dejanstancovic7466 Holaaa??

[@DextroTV]

@@angelamquinonesgarcia5210 XDXDXD

[@vicentehernandezpadilla9635]

Claro, limpio, fácil, ameno, pequeño pero potente, una manera sútil de tocar varios palos de una manera rápida y precisa, al grano en todo momento, perfecto para empezar con las ideas claras y para sacarte del atolladero. Un diez por mi parte

[@MrPonchix]

Tanto tiempo y apenas me encuentro con este tema. No soy muy viejo trabajando con programacion web, por eso este video me encanto, me dejo claro muchas cosas, es genial. Gracias

[@musicalonso1701]

es muy raro que yo diga esto, pero debo felicitarte por hacer algo que pocos hacen.. enseñar de verdad. hay tanta mierda en youtube que cuando encuentras un video bueno te emociona. Muchas gracias

[@vriverac]

Maestro!!! excelente video me sacaste de las dudas que llevo durante semanas, excelente manera de enseñar!!!

[@LornisHervilla]

Gracias, estaba implementando un fetch y no entendía que pasaba qué no llegaban los del post a PHP, y me di cuenta que no estaba usando los nombres de los campos sino los id's... Saludos y muchos éxitos

[@tomasfernandez72]

Hermano muchísimas gracias, me salvaste en un trabajo hace dias que estoy viendo como hacerlo y nunca encontre un tutorial tan bien explicado

[@guillermorojasg]

Like si estas estudiando en line en cuarentena por el COVID-19

[@FascompInformatica]

Estimado soy Fabián y he visto tus videos y este en particular me llamo la atención ya que no conocía FETCH() y es una excelente forma de interactuar con PHP o con lo que sea por Red, fácil de usar y comprender, pero haciendo unos ejemplos con MySQL me di cuenta que cuando envías un JSON desde PHP con (res => res.json()) lo que en realidad hace es pasar ese Json que envia PHP a un Array, no lo digo por que sepa mucho del tema, sino por que estuve 3 días tratando de entender por que no podía pasar ese maldito JSON a ARRAY en Javascript. Luego me di cuenta que al imprimir en consola lo que me enviaba PHP era un Json pero cuando pasaba por Fetch() este lo transformaba de inmediato a un array, y obvio me di cuanta al tercer día que se me ocurrió imprimir en consola los datos de entrega del fetch(). Despues ocupe res.text() y con esto si me devolvía el JSON que me pasaba PHP. En fin lo digo por si alguien se calienta la cabeza con lo mismo que pasé yo ya que como res.json() se puede pensar que lo que devuelve es un JSON pero en realidad es un array. Se nota al trabajar fetch con base de datos. Bueno eso no mas y gracias por tu tiempo aunque se que el video es de mas de un año. Saludos a todos.

[@nurderly]

A mi me genera un error en el envió de la respuesta por parte de fetch, pero si hago lo que tu hiciste me envía todas las etiquetas html y no entiendo porque, me podrías ayudar

[@estrateg-IT]

Excelente me ahorraste un buen de horas de andarle buscando a mi me daba el error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data al regresar del post.php

[@FascompInformatica]

@@estrateg-IT que bien que pude ser de ayuda para alguien.

[@gabrielsandoval6037]

la explicacio de cada video que vi hasta ahora no puede ser mejor, mil gracias!

[@lujot]

Cada vez que veo algún tutorial tuyo, me quedo impresionado, gracias...

[@cris2720]

Muy bien explicado, lo use para una api desde material ui con react. lo modifique para usarse desde el framework y funciono al 100

[@CMIARG]

segui con el curso de JS! te necesitamos xD

[@profedavid5846]

Excelente video!! Sos muy claro y simple para explicar, se entienden todos los conceptos. Anda todo tal cual lo expones.

[@walterjosesuarezdelacruz1495]

Caray que buen video, gracias, saludos desde PERÚ.

[@juanbarthes4066]

Muchas gracias amigo estoy estudiando una carrera de sistemas y justo nos enseñaron eso pero no entendía por que no podía hacerlo andar en mi código, gracias a tu vídeo me di cuenta de mi error

[@milito-no.k3149]

Tremendo ejercicio te mandaste bluweb, máquina!! Muy bueno compadre

[@milito-no.k3149]

Máquina Blueweb...muy buena compadre! Queremos cursos full de php + Laravel bra!!

[@emmanuelescoto4731]

Mushisimas gracias por tus aportes ... muy emocionado con tus vídeos prometo ver todas tus listas... gracias por compartir tus conocimientos y sobre todo por la humildad con la que los compartes .... saludos desde Guadalajara Jalisco México

[@Myn624]

Hola Blueuweb! fantastico mini curso he aprendido mucho con el, creo que hablo por todos cuando digo que seria genial que continuaras con este mini curso... espero veas este mensaje. Un saludo desde El Salvador.

[@Carlanaza]

Me encanta la forma en la que explicas todo! muchas gracias, vas de poco a poco, paso a paso y cuando uno menos lo espera y en poco tiempo hemos aprendido hacer cosas geniales! Para ir un poco mas allá, como se haría si en vez de usar un Alert quisiéramos usar popovers por cada input?

[@unlimited_code]

Validados de forma individual

[@rafaelcarrera4559]

Nunca antes habia visto un video tuyo, y aunque solo conocia lo basico de js, le entendi muy bien a todo, eh encerio gracias, explicas muy bien, espero seguir por el canal aprendiendo 😉👌

[@emilfg]

bueno vamos por la segunda.... nunca entendi el prevent default tan bien como hasta ahora... excelente profe

[@edgardoruben3009]

Muy bien explicado, justo lo que necesitaba

[@21jonathanhudson]

Muy buenos los cursos, se entiende mucho las explicaciones. Felicidades y gracias por publicar este tipo de material. Saludos desde Panamá.

[@marloncode]

Excelente amigo.. saludos desde Peru!!!

[@_rvgz]

Muy buena manera de explicar los conceptos, se entienden muy bien los ejemplos en los que lo aplicas! Capo capo

[@carlaortiz4069]

Gracias!!! me encanta la forma de explicar, lo haces todo muy sencillo, espero seguir viendo mas de tus videos!!!

[@antonior.9661]

ya que enseñas! que por cierto todo bien y muy claro. Podrias ser un poco mas estricto enseñando que luego reeducar es mas complicado, cuando una variable no es 'variable' no entiendo porque usar VAR y no entiendo que ventajas le ves a hacer promesas con '.then' que seguro las tendra, pero estando await y la ventaja de async no termino de verlo.

[@mariacristinaulloagarrido1224]

Tremendamente didáctico y ameno fuera de útil... con esto da gusto aprender! Gracias!!

[@bluuweb]

Muchas gracias María! he he he! :)

[@obedarriagavera4645]

Muchas gracias amigo por enseñar algo concreto sin tanto rollo, felicidades.

[@ep4r4]

Ey! buenísimo como explicas. Te felicito

[@grbsql]

Excelente en todos los aspectos. Eres grande. En la sencillez está el poder. Muchísimas gracias

[@gabrielramirez3015]

Muy claro todo profe, seco bro !!! gracias !!

[@mariocalcetin7602]

El mejor de todos los tiempos señor.

[@fmauriciocruzr]

Explicas muy bien en verdad. Haces que todo se vea muy sencillo. Gracias.

[@dubekone]

Amigo, la verdad es que este vídeo me ayudo mucho!!! Una pregunta subiste lo que mencionas al final del video, sobre el login con php y mysql?

[@SonicWaveShow]

Era justo lo que estaba buscando !!! te ganaste un suculento Like !

[@brianalexander2202]

Espectacular video! incomparable! .. en espera del CRUD completo, aunque ya con lo que has enseñado hay suficiente material para nosotros mismos ponernos a jugar. Muchas gracias

[@bluuweb]

Muchas gracias por tus comentarios Brian! espero seguir subiendo más ejercicios jijij Saludos!!

[@laprincesaantonia4416]

Hey si que eres bueno para manternlo a uno conectado. Muy claro en las explicaciones. Tienes un seguidor más !!. Felicidades y geracias por compartir tu conocimiento

[@eduardocuadra6681]

Que bien explicas muchas bendiciones mi bro saludos desde Lima / Perú.

[@carlosandressanchez865]

Que Crack!! , muy buena la explicacion y ademas chsitosa , el tema se vuelve facil explicandolo de esta manera, lo unico que quisiera es saber como usar un api con key mediante Fetch (Google maps) . Saludos desde Colombia!! sigue con mas videos asi

[@luisespinoza5618]

Te agradezco mucho por tanto esfuerzo para enseñarnos! GRACIAS!!!!

[@lanb08]

Muy buena la clase, solo una observación en mi programación. cuando utilizo el fetch para traer la información del archivo PHP, tengo que cambiar el .then(res = res.json()) por .then(res = res.text()) para poder recibir la información, de lo contrario me da un error 405. ¿A que se debe?. Con .then(res = res.text()) recibo la información normalmente. Muy agradecido por tu colaboración, que sigan los triunfos

[@miguelherrera8679]

Me dio igual error 405 sin importar el formato, pero luego me di cuenta que el error fue mío, encendí el Live Server por lo cual me estaba dando el error cuando debería estar usando el Localhost de Xampp

[@alito-abeldano]

@@miguelherrera8679 Tu comentario posiblemente me haya ayudado a no dejar un laboratorio, gracias

[@coliveros10796]

Muy buen vídeo felicitaciones, cuando continuas los vídeos que faltan para trabajar el crud.

[@lainperaltalain2706]

exelente informacion y manera de explicar crack el proyecto CRUD con fetch api y todos sus metodos plis

[@oscar_cornejo]

Gracias por este nuevo material, hubiese sido interesante ver los errores con catch(), pero espero seguir revisando más contenido. Saludos!

[@bluuweb]

En el próximo lo tendré en cuenta. Gracias por los comentarios :) Saludos

[@MarcoAntonio-dm8yn]

Perfectamente explicado como debe ser, solo que tengo una duda maestro y es que si tengo un arreglo y a la vez un formulario, como podría mandar los datos, seria mandarlos en el mismo fetch o seria uno para cada uno?

[@brayanbarrosobenitez8060]

Felicitaciones muy buen curso, bien explicado y de muy buena utilidad quedo atento a la proxima clase

Me encantó este video... has resuelto mi duda de como comunicar mi formulario con un archivo PHP teniendo un servicio backend totalmente en Vanilla JS.. gracias!

[@ludge143]

Bluuweb eres el mejor!! lejos tu y mosh son los mejores!!

[@juanvaldes8494]

Q calidad bluuwebbb cuando este devengandooo tomaaa tuuuu ...$€

[@belenwilson4513]

añadir type="submit" a un button, elegante lo que es elegante (tu lo repites) no es que sea. pero bueno, si javascript no es capaz de detectar que button ya es por defecto type submit, pues habra que añadirlo... y solo lo digo porque a mi siempre me parecio 'elegante' y menos lineas de codigo el usar onclick pero aqui el profe eres tu. aunque si de elegancia se trata, hice varios con asyn function que recogia el form simplemente por ser un form, sin tener que meterle id ni agregar eventos y que hasta me trae el action del form por lo que claramente era mas facil reutilizarlo, pero no pasa reaprendo y olvido rapido 😅

[@victorvidal7344]

Tremendo video, me quedó muy claro 👌

[@eberdanielcentenoolivares6641]

Bien explicado!! Voy a practicar PHP y MySQL para seguir aprendiendo, muchas gracias .

[@bluuweb]

Genial! si porque la próxima lección es puro php y mysql jijij Saludos

[@andrealexanderlagunajurado3176]

Saludos desde Perú, eres un buen profe :)

[@bryanrubi3641]

Super agradecido. Explicas demasiado bien. Gracias

[@juanruiz6264]

tus videos son un tesoro amigo

[@valeriafem3810]

Hola una pregunta, en Javascript no se puede hacer CRUD sin tener que usar PHP? O es necesario? Hasta el momento no he encontrado CRUD con javascript usando algo como Node JS que supuestamente es para el backend. Pero nadie lo usa y solo con PHP o que?

[@walterochoa2315]

Excelente explicación 🎉

[@enriquegarcia9147]

Excelente tutorial para tener un punto de partida con fetch() desde Vanilla JS

[@dragonghostt]

Excelente tutorial de Fetch, y lo prometido de base de datos??? saludos y gracias

[@deyvismarinos4193]

Tmb estoy esperando :c

[@marcelofirmapaz5724]

Genio de los genios, sos un groso explicando, gracias!

[@KarinCosta65]

Consulta: al inspeccionar con F12, en la pestaña network ves la url y los parametros que envías?

[@gustavocastillejos6189]

Le agradezco! excelente tutorial!

[@serome111]

:v siempre que olvidó cómo se hacen algunas cosas regreso a este video, excelente gracias por compartir.

[@Kevinsillo]

7:33 Me saco una risa xD

[@gabrielramirez3015]

jajajajaja igual xDDD

[@jorgeiraira9654]

buenos los videos, una recomendación ... dale unos segundos mas al video con una pequeña música... ya que cuando recuerdas que dejemos comentarios voy a escribir y se me olvida detener el video ajjajajajjaja, aunque sea la publicidad de bootstrap ¡¡saludos!!

[@samtec3932]

Apreciable maestro Bluuweb. quiero comentarle que he escrito el código paso a paso y también he descargado el material con su propio código sobre este ejercicio, pero no entiendo la razón de porque en el archivo JavaScript me marca un error en esta linea: .then( res => res.json()) he probado ponerlo como texto de la siguiente manera: .then( res => res.text()) pero de ninguna de las dos maneras se ejecuta correctamente. siempre marca el mismo error. Pudiera ayudarnos por favor a solucionarlo o a indicarnos porque a usted le corre y a otros no. acaso es por el navegador o cual cree que sea la razón? esperamos su respuesta y muchísimas gracias de antemano apreciable maestro. Saludos

[@juanpablohewitt7613]

me pasa igual

[@SerEfGonzalez]

me encantó, ahora bien como puedo implementar esto para hacer un turnero?

[@tuto-bz5lu]

Muy bien explicado amigo

[@danielrojas4326]

Todos tus videos son excelente gracias por compartirnos tus conocimientos Saludos!!!!!!!!

[@ricardopieresko4410]

Excelente explicación!!!

[@AngelVargas-mm7qq]

Muy buen tutorial... Gracias por compartir tus conocimientos....

[@jorgerobbertlozanobarro2036]

Gracias por estos tutoriales

[@irmagarcia5541]

Excelente video ! Habrá manera de agregarle un loader antes de que realice cada petición ? cómo se hacía antes con jQuery en beforeSend() ???

[@fourwindseducation5360]

Tienes el don de la enseñanza gracias!!

[@AndresCLopez-ts2hh]

Que buen video, como seria el codigo para cuando se recibe una respuesta pero se quiere retornar a otra pagina y que tenga en cuenta las sessiones con php ???

[@newentu]

Excelente maravilloso magistral curso!!! todo muy bien explicado!!

[@kachorroFdv]

Hola, disculpa me marca error 405 POST (method not allowed) ya intente de todo pero no se porque no me deja alguien sabe como solucionarlo????

[@erickdavidlucerocarrillo256]

Excelente aporte a la comunidad.

[@angelmata1974]

Es muy bueno el tutorial y lo explicas muy bien

[@sebastianbenitez664]

Genio .....Ahora le tome cariño a los chilenos, ..

[@victorguevara4698]

Hola saludos.. Brutal el video. Tengo una duda: como puedo enviar un array del local stotage a php y leerlo en php.

[@androsio7ja865]

hola buenas muy buen video, pero tengo una duda. Al hacer el fetch me daba un error: from origin 'null' has been blocked by CORS policy, lo resolví añadiendo al fetch la opcion mode:"no-cors", pero ahora me da un error en el .then( res => res.json()), main.js:14 Uncaught (in promise) SyntaxError: Unexpected end of input (at main.js:14:21) at . No se muy bien que hacer para resolverlo.

[@edgarhdz4229]

Una pregunta si el js no esta en la carpeta raiz, como le indico al php donde enviar el echo json_encode????

[@DjTitoxxVzla]

Hola, una pregunta, se pudiese implementar Captcha? si ese formulario se ejecuta desde una web en particular, como hace mi api para saber de que web Vino? el formulario puede reconocer en que web esta?

[@leandrocief2548]

Que grande compaire! Un genio la verdad!!!

[@rogeliohilario1234]

Tengo un problema con el tema de la segunda promesa, estoy enviando los datos del formulario a un documento de php donde valido usuario y la contraseña, me marca un error de sintaxis en la linea de la segunda promesa, ya valide mi codigo y no encuentro el problema, cuando comento las lineas referentes a la validacion en el documento php y solo dejo las lineas para enviar la respuesta al js si me corre sin problema. algun detalle que este omitiendo???

[@NabilExpertoDigital]

muy muy bueno amigo gracias, complementalo con Catch en promesas y errores y te doy 100 likes

[@andresastorga3905]

Hola primero que todo muchas gracias por compartir tus conocimientos. el caso es el siguiente: a lo largo de este curso e echo todo lo que enseñaste, pero en este paso en especifico me ocurre que el div del alert trabaja según lo programado excepto por el echo de que al cambiar del caso en que están todos los campos y viceversa el div no se va, al cambiar se agrega otro alert debajo del que estaba, e probado muchas soluciones de modo que no me quedo de otra que pedir tu ayuda si es que tienes alguna solución a esto o te han planteado el mismo caso gracias saludos

[@srm3117]

Muy buenas tus explicaciones. Muchas gracias por compartir.

[@joseluisperezmontano2391]

AYUDA cuando implemento una función y la ejecuto desde html después del primer click va aumentando la cantidad de respuestas que devuelve ¿a que se debe?

[@adriancaraballo3751]

Eres de los mejores bro

[@jlorca1]

Te felicito por el curso. mi duda es si en el archivo php se pueden enviar las respuestas con un simple ECHO?

[@rodrigogarcia1571]

Hola profesor aplique lo que acabas de enseñar y lo adicione a una BD logre ingresar los datos pero, ahora salio una interrogante ¿como hago para editar cada registro ingresado?, es decir he ingresado 20 registros y por cada registro he puesto un botón Editar pero este botón no envía un el formdata ya que no es un submit podría darme una idea porfavor

[@williamjoselinares3314]

Explicas genial amigo. Bendiciones 👐👐

[@ralveno]

Excelente contenido, Muchas gracias por compartir tus valiosos conocimientos

[@dragonghostt]

Excelente Video maestro, un CRUD de Fetch sería interesante...

[@edwardalbertrodriguez1151]

Muchisimas Gracias!! explicas muy bien y me has ayudado muchisimo de nuevo gracias!