3
respuestas

Error al obtener datos de un formulario de html para ser guardados en DB usando un endpoint desarrollado con Spring Boot 3.

Saben no consigo llenar una base de datos con los datos de un formulario de html con Spring boot 3: Este es el formulario:

<div class="section contact" id="contact">
        <div id="map" class="map"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="contact-form-card">
                        <h4 class="contact-title">Send a message</h4>
                        <form action="http://localhost:8080/posts/reg" method="post">
                         <div class="form-group">
                            <input name="nombre" class="form-control" type="text" placeholder="Nombre *" required>
                        </div>
                        <div class="form-group">
                            <input name="apellido" class="form-control" type="text" placeholder="Apellido *" required>
                        </div>
                        <div class="form-group">
                            <input name="email" class="form-control" type="email" placeholder="Email *" required>
                        </div>
                        <div class="form-group">
                            <textarea name="msg" class="form-control" placeholder="Message *" rows="7" required></textarea>
                        </div>
                        <div class="form-group ">
                            <button type="submit" class="form-control btn btn-primary">Send Message</button>
                        </div>
                        </form>
                        <script>
                                $(document).ready(function () {
                                    $("contact").submit(function (event) {
                                        event.preventDefault();

                                        // Captura los valores del formulario
                                        var formData = {
                                            nombre: $("#nombre").val(),
                                            apellido: $("#apellido").val(),
                                            email: $("#email").val(),
                                            msg: $("#msg").val()
                                        };

                                        // Envía los datos como JSON
                                       $.ajax({
                                            type: "POST",
                                            url: "http://localhost:8080/posts/reg",
                                            contentType: "application/json",  // Establecer el tipo de contenido a JSON
                                            data: JSON.stringify(formData),   // Convertir el objeto formData a JSON
                                            success: function (response) {
                                            // Manejar la respuesta del servidor cuando la solicitud se completa exitosamente
                                            console.log("Respuesta del servidor:", response);
                                            // Puedes realizar otras acciones aquí, como actualizar la interfaz de usuario o    mostrar un mensaje de éxito.
                                            },
                                           error: function (error) {
                                            // Manejar errores en la solicitud
                                            console.log("Error en la solicitud:", error);
                                            // Puedes mostrar un mensaje de error al usuario o tomar otras medidas según el tipo    de error.
                                            }
                                        });
                                    });
                                });
                            </script>

                    </div>

Y este es el endpoint que hice:

  @PostMapping("/reg")
    public ResponseEntity<DatosRespuestaCompletaPost> registrarPost(@RequestBody @Valid DatosRegistroPost datosRegistroPost,
                                                                    UriComponentsBuilder uriComponentsBuilder) {
        System.out.println("Envío correcto");
        System.out.println(datosRegistroPost);
        Post post = postRepository.save(new Post(datosRegistroPost));
        DatosRespuestaCompletaPost datosRespuestaCompletaPost =  new DatosRespuestaCompletaPost(post.getId(), post.getNombre(), post.getApellido(), post.getEmail(), post.getTelefono(), post.getMsg(), post.getActive());
        URI url = uriComponentsBuilder.path("/posts/{id}").buildAndExpand(post.getId()).toUri();
        return ResponseEntity.created(url).body(datosRespuestaCompletaPost);
    }

Me gustaría que alguien me ayude por favor.

3 respuestas

Hola César, ¡espero que estés bien!

Me gustaría hacer algunas preguntas:

¿Qué parte del curso estás? Qué actividad etc.

¿Qué errores se señalan en la consola del navegador (utilice el botón F12 para ver la pestaña devtools) o el terminal IDE?

Creo que para acceder a los atributos utilizando # + nombre es necesario asignar un id de valor único a cada línea input, por ejemplo:

<input name="nombre" id="nombre" class="form-control" type="text" placeholder="Nombre *" required>

Además, compruebe si ''/posts'' es el valor correcto referente al Request Mapping de su clase.

¡Saludos y buenos estudios!

puedes poner el mensaje de la pila de error? plis

Respondiendo a esta pregunta, ¿Qué parte del curso estás? Qué actividad etc. Yo estoy aplicando los conocimientos que he adquirido en los 3 cursos de Spring, o sea que es un proyecto mío.

Ahora a esta ¿Qué errores se señalan en la consola del navegador (utilice el botón F12 para ver la pestaña devtools) o el terminal IDE?:

Este es el error que da Intel-J Idea: 2023-10-20T18:50:09.345-06:00 WARN 6217 --- [nio-8080-exec-4] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'application/x-www-form-urlencoded;charset=UTF-8' is not supported]

Y esto es el error que me da el navegador: Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Oct 20 18:50:09 CST 2023 There was an unexpected error (type=Unsupported Media Type, status=415). Content-Type 'application/x-www-form-urlencoded;charset=UTF-8' is not supported.

Les cuento es una landing page mía en la que quiero guardar en la base de datos la información obtenida a través de un endpoint desarrollado en Spring Boot 3 y en la página web uso html, js, y jquery.

Muchas gracias por su valiosa ayuda.