Enviar datos por método POST a PHP con Formulario HTML/JAVASCRIPT (#4 Fetch API)
Вставка
- Опубліковано 20 вер 2024
- 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 UA-cam! 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
![Git y Github: Curso desde cero [Tutorial en Español] #clasesConBluuweb](http://i.ytimg.com/vi/PW_A-lOpVV0/mqdefault.jpg)
![Git y Github: Curso desde cero [Tutorial en Español] #clasesConBluuweb](/img/tr.png)
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
holaaa
@@dejanstancovic7466 Holaaa??
@@angelamquinonesgarcia5210 XDXDXD
Like si estas estudiando en line en cuarentena por el COVID-19
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
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
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
Maestro!!! excelente video me sacaste de las dudas que llevo durante semanas, excelente manera de enseñar!!!
la explicacio de cada video que vi hasta ahora no puede ser mejor, mil gracias!
Excelente video!! Sos muy claro y simple para explicar, se entienden todos los conceptos. Anda todo tal cual lo expones.
Hermano muchísimas gracias, me salvaste en un trabajo hace dias que estoy viendo como hacerlo y nunca encontre un tutorial tan bien explicado
Cada vez que veo algún tutorial tuyo, me quedo impresionado, gracias...
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
Muy buenos los cursos, se entiende mucho las explicaciones. Felicidades y gracias por publicar este tipo de material. Saludos desde Panamá.
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.
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
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
@@estrateg-IT que bien que pude ser de ayuda para alguien.
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
Máquina Blueweb...muy buena compadre! Queremos cursos full de php + Laravel bra!!
Gracias!!! me encanta la forma de explicar, lo haces todo muy sencillo, espero seguir viendo mas de tus videos!!!
Tremendo ejercicio te mandaste bluweb, máquina!! Muy bueno compadre
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.
Muy buena manera de explicar los conceptos, se entienden muy bien los ejemplos en los que lo aplicas! Capo capo
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 😉👌
Caray que buen video, gracias, saludos desde PERÚ.
Muy bien explicado, lo use para una api desde material ui con react. lo modifique para usarse desde el framework y funciono al 100
Explicas muy bien en verdad. Haces que todo se vea muy sencillo. Gracias.
Excelente en todos los aspectos. Eres grande. En la sencillez está el poder. Muchísimas gracias
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
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?
Validados de forma individual
Muchas gracias amigo por enseñar algo concreto sin tanto rollo, felicidades.
Bluuweb eres el mejor!! lejos tu y mosh son los mejores!!
Te agradezco mucho por tanto esfuerzo para enseñarnos! GRACIAS!!!!
Era justo lo que estaba buscando !!! te ganaste un suculento Like !
segui con el curso de JS! te necesitamos xD
Excelente amigo.. saludos desde Peru!!!
Muy bien explicado, justo lo que necesitaba
Q calidad bluuwebbb cuando este devengandooo tomaaa tuuuu ...$€
Felicitaciones muy buen curso, bien explicado y de muy buena utilidad
quedo atento a la proxima clase
Muuuuuuy bueno !!!! Estoy practicando Ajax. Qué me sugieres Ajax o fetch api?
Tremendamente didáctico y ameno fuera de útil... con esto da gusto aprender! Gracias!!
Muchas gracias María! he he he! :)
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
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
El mejor de todos los tiempos señor.
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
Muchas gracias por tus comentarios Brian! espero seguir subiendo más ejercicios jijij Saludos!!
Excelente maravilloso magistral curso!!! todo muy bien explicado!!
Todos tus videos son excelente gracias por compartirnos tus conocimientos Saludos!!!!!!!!
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
Super agradecido. Explicas demasiado bien. Gracias
bueno vamos por la segunda.... nunca entendi el prevent default tan bien como hasta ahora... excelente profe
Que bien explicas muchas bendiciones mi bro saludos desde Lima / Perú.
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?
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
Ey! buenísimo como explicas. Te felicito
Muy buen tutorial... Gracias por compartir tus conocimientos....
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
me pasa igual
Me encantó, la mejor explicación y eso que busqué bastante. Sub ;)
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.
Bien explicado!! Voy a practicar PHP y MySQL para seguir aprendiendo, muchas gracias .
Genial! si porque la próxima lección es puro php y mysql jijij Saludos
tus videos son un tesoro amigo
Excelente aporte a la comunidad.
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?
Muy claro todo profe, seco bro !!! gracias !!
GENIOOOOO !!!!!!! UN MILLÓN DE GRACIAS, gracias !!
Excelente tutorial de Fetch, y lo prometido de base de datos??? saludos y gracias
Tmb estoy esperando :c
Muy buen vídeo felicitaciones, cuando continuas los vídeos que faltan para trabajar el crud.
Saludos desde Perú, eres un buen profe :)
Tienes el don de la enseñanza gracias!!
Genio de los genios, sos un groso explicando, gracias!
Que grande compaire! Un genio la verdad!!!
Gracias por este nuevo material, hubiese sido interesante ver los errores con catch(), pero espero seguir revisando más contenido. Saludos!
En el próximo lo tendré en cuenta. Gracias por los comentarios :) Saludos
exelente informacion y manera de explicar crack el proyecto CRUD con fetch api y todos sus metodos plis
Excelente contenido, Muchas gracias por compartir tus valiosos conocimientos
Explicas genial amigo.
Bendiciones 👐👐
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!
Excelente tutorial para tener un punto de partida con fetch() desde Vanilla JS
Muy buenas tus explicaciones. Muchas gracias por compartir.
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?
Tremendo video, me quedó muy claro 👌
Muchisimas Gracias!! explicas muy bien y me has ayudado muchisimo de nuevo gracias!
Buen video bluuweb. Al final del video dices que vas a hacer otra practica junto con php y mysql, donde se encuentra ese otro video de esa practica? Saludos.
Hola Bluuweb en el minuto 23:58 comentas que vas a mostrar como entrar a una area restringida con javascript ¿En donde tienes ese video? Gracias y un abrazo
Es muy bueno el tutorial y lo explicas muy bien
7:33 Me saco una risa xD
jajajajaja igual xDDD
Le agradezco! excelente tutorial!
Muy bueno y al grano
Excelente explicación 🎉
Excelente explicación!!!
Consulta: al inspeccionar con F12, en la pestaña network ves la url y los parametros que envías?
Eres de los mejores bro
Muy bien explicado amigo
Excelente amigo, saludos del sur de brasil
muy muy bueno amigo gracias, complementalo con Catch en promesas y errores y te doy 100 likes
Tu si sabes bro, un like y me gusta de mi parte, un suscriptor más, gracias
jumadre casi me muero esto me salvo estaba mas perdida gracias amo este canas :)
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????
Hola estimado. Gracias por el video pero tengo una duda porque en el minuto 18:20 pones .then( res => res.json() ) ? Si se supone que desde php ya viene en formato json.
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() ???
¡Increíble!
Excelente lo tuyo muchacho. Muchas gracias.
Gracias por estos tutoriales
Excelente explicación, una pregunta yo trato de hacerlo con bd mysql y mvc pero me genera un error cuando regresa la respuesta "Uncaught (in promise) SyntaxError: Unexpected token e in JSON at position 0" lo hago igual que tu y he tratado de solucionarlo porque se que es porque no me regresa un json sino regresa todo el html de la vista y no se porque no me regresa la respuesta del metodo
Me pasa lo mismo, pero no entiendo porque, lo pudiste resolver?
Mismo error, aun no encuentro solucion
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 😅
Algún framework para comenzar a crear app mobiles sin usar android studio
Nuevamente Felicitaciones... Continua Asi.! Saludos.!