Foro de elhacker.net

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

<form id="contact-form" class="contact-form" method="POST" th:action="@{/send}">
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<input type="text" class="form-control" name="NAME"
											placeholder="Name" th:required="true">
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<input type="email" class="form-control" name="EMAIL"
											placeholder="Email" th:required="true">
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<input type="text" class="form-control" name="SUBJECT"
											placeholder="Subject">
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<textarea class="form-control" name="MESSAGE"
											placeholder="Message" rows="3"></textarea>
									</div>
								</div>
							</div>
							<input type="hidden" name="_next" value="">
							<input type="hidden" name="_captcha" value="false">
							<div class="row">
								<div class="col-md-12">
									<button type="submit" class="btn mybtn2" id="botonEnviar">enviar
										mensaje</button>
								</div>
							</div>
						</form>
 
 
...
	<div th:insert="layout/footer :: footer"></div>
</body>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<script type="text/javascript" th:src="@{/js/main.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
      	$.ajax({
	    	type:"post",
	    	data:str,
		    url:"/send/mail",
		    dataType: "json",
		    success: function(result){
		       $(element).append(result);
		    }
		})
});
</script>
</html>
 
 

y el metodo del controlador

@Controller
public class MailController {
 
	@Autowired
	private MailService mailService;
 
	@PostMapping("/sendl")
	@ResponseBody
	public String sendMail(@Valid @RequestParam("NAME") String name, @RequestParam("EMAIL") String email,
			@RequestParam("SUBJECT") String subject, @RequestParam("MESSAGE") String message)
			throws MessagingException {
 
		HttpHeaders headers = new HttpHeaders();
		headers.add("Custom-Header", "mail");
		String mensaje = "¡Greetins! \n\nName: " + name + "\nE-mail: " + email
				+ "\nMessage: " + message;
		mailService.sendMail(email, "beginnerweb@hotmail.com", subject, mensaje);
		return message;
	}
 
}

 :huh:

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"