elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  springboot y ajax formulario
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: springboot y ajax formulario  (Leído 4,033 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
springboot y ajax formulario
« en: 26 Enero 2022, 21:02 pm »

Hola me preguntaba porque se me recarga la página al enviar el email, como hago para que no se cargue?

este es el html

Código
  1. <form id="contact-form" class="contact-form" method="POST" th:action="@{/send}">
  2. <div class="row">
  3. <div class="col-md-6">
  4. <div class="form-group">
  5. <input type="text" class="form-control" name="NAME"
  6. placeholder="Name" th:required="true">
  7. </div>
  8. </div>
  9. <div class="col-md-6">
  10. <div class="form-group">
  11. <input type="email" class="form-control" name="EMAIL"
  12. placeholder="Email" th:required="true">
  13. </div>
  14. </div>
  15. </div>
  16. <div class="row">
  17. <div class="col-md-12">
  18. <div class="form-group">
  19. <input type="text" class="form-control" name="SUBJECT"
  20. placeholder="Subject">
  21. </div>
  22. </div>
  23. </div>
  24. <div class="row">
  25. <div class="col-md-12">
  26. <div class="form-group">
  27. <textarea class="form-control" name="MESSAGE"
  28. placeholder="Message" rows="3"></textarea>
  29. </div>
  30. </div>
  31. </div>
  32. <input type="hidden" name="_next" value="">
  33. <input type="hidden" name="_captcha" value="false">
  34. <div class="row">
  35. <div class="col-md-12">
  36. <button type="submit" class="btn mybtn2" id="botonEnviar">enviar
  37. mensaje</button>
  38. </div>
  39. </div>
  40. </form>
  41.  
  42.  
  43. ...
  44. <div th:insert="layout/footer :: footer"></div>
  45. </body>
  46. <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
  47. <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
  48. <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
  49. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
  50. <script type="text/javascript" th:src="@{/js/main.js}"></script>
  51. <script type="text/javascript">
  52. $(document).ready(function() {
  53.       $.ajax({
  54.     type:"post",
  55.     data:str,
  56.    url:"/send/mail",
  57.    dataType: "json",
  58.    success: function(result){
  59.       $(element).append(result);
  60.    }
  61. })
  62. });
  63. </html>
  64.  
  65.  

y el metodo del controlador

Código
  1. @Controller
  2. public class MailController {
  3.  
  4. @Autowired
  5. private MailService mailService;
  6.  
  7. @PostMapping("/sendl")
  8. @ResponseBody
  9. public String sendMail(@Valid @RequestParam("NAME") String name, @RequestParam("EMAIL") String email,
  10. @RequestParam("SUBJECT") String subject, @RequestParam("MESSAGE") String message)
  11. throws MessagingException {
  12.  
  13. HttpHeaders headers = new HttpHeaders();
  14. headers.add("Custom-Header", "mail");
  15. String mensaje = "¡Greetins! \n\nName: " + name + "\nE-mail: " + email
  16. + "\nMessage: " + message;
  17. mailService.sendMail(email, "beginnerweb@hotmail.com", subject, mensaje);
  18. return message;
  19. }
  20.  
  21. }

 :huh:


En línea

7w7
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: springboot y ajax formulario
« Respuesta #1 en: 27 Enero 2022, 19:58 pm »

Esto es solo front, el back no tiene que ver.

El problema es que tu formulario se envia por post, lo que implica una redireccion de toda la pagina.

Y luego veo que haces una petición ajax peto cuando carga el documento.

Lo que tendrias que hacer es escuchar el evento submit del formulario y llamar a la funcion preventDefault() de ese evento.

para poder escuchar el evento submit del form podes usar los bind de jquery.

Y en la petición ajax deberías agregar la opn "async:true"
   


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como procesar campos de formulario con AJAX !!
PHP
Diabliyo 3 5,950 Último mensaje 20 Agosto 2008, 01:51 am
por coolfrog
Validar formulario AJAX-PHP e imprimir respuesta
Desarrollo Web
ZharkD 4 6,370 Último mensaje 19 Julio 2010, 06:58 am
por ZharkD
Formulario php y ajax
PHP
datab 1 1,490 Último mensaje 20 Abril 2015, 21:28 pm
por Usuario Invitado
Validación formulario Ajax
Desarrollo Web
gpinyol10 1 1,833 Último mensaje 11 Abril 2016, 17:08 pm
por Gallu
Como se emplea el ajax en un formulario de Login?
Desarrollo Web
jesus1997 1 2,486 Último mensaje 12 Enero 2017, 04:12 am
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines