Используйте форму для отправки электронной почты в Spring Boot с помощью Thymeleaf

Я хочу реализовать форму отправки почты с помощью Thymeleaf.

У меня есть страница start_page.html, содержащая эту форму:

<div class = "w3-container w3-padding-64" id = "contact">
  <h1>Contact</h1><br>
  <p>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.</p>
  <p class = "w3-text-blue-grey w3-large"><b>Catering Service, 42nd Living St, 43043 New York, NY</b></p>
  <p>You can also contact us by phone 00553123-2323 or email [email protected], or you can send us a message here:</p>
  <form th:action = "@{~/homePage/contact}" th:object = "${contactMail}" method = "post" target = "_blank">
    <p><input class = "w3-input w3-padding-16" type = "text" th:field = "*{nom}" th:placeholder = "#{homePage.nom}" required name = "nom"></p>
    <p><input class = "w3-input w3-padding-16" type = "text" th:field = "*{prenom}" th:placeholder = "#{homePage.prenom}" required name = "prenom"></p>
    <p><textarea class = "w3-input w3-padding-16" type = "text" th:field = "*{message}" style = "height: 250px;" th:placeholder = "#{homePage.message}" required name = "message"></textarea>
    <p><button class = "w3-button w3-light-grey w3-section" type = "submit">[[#{homePage.envoyer}]]</button></p>
  </form>
</div>

Я уже реализовал контроллер для этого действия формы

    @Controller
    @PropertySource(ignoreResourceNotFound = true , value = "classpath:messages.properties")
    public class HomePageController {

        @Autowired
        private MailContactService mailService;

        @RequestMapping(value = "/homePage/contact", method = RequestMethod.POST)
        public String sendMessage(ContactMail contactMail){
            mailService.sendContactMail(contactMail);
            System.out.println("done");
            return "/home/start_page";
        }
    }

Я не получаю желаемого поведения: я думал, что моя страница останется прежней, но моя страница перезагружается.

Хочу приказать контроллеру что-то делать, не выходя с моей страницы.

Я погуглил и обнаружил, что могу отправить объект службы на свою страницу, но я хочу избежать этого варианта, если есть другие решения.

Спасибо.

spring spring-mvc spring-boot thymeleaf

11.03.2018 13:50

Запросы к JPA

Модели проектирования, используемые в spring framework

729

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет использовать вызов AJAX, если вы не хотите обновлять страницу.

Это означает, что вы хотите перехватить поведение публикации HTTP-формы по умолчанию (которое будет выполнять полное обновление страницы) с помощью javascript.

Для этого вам необходимо:

Удалите тег действия в вашей форме (позвольте javascript обрабатывать его при нажатии кнопки для отправки формы)

Добавьте это на свою страницу (будет выполнено при отправке формы:

$(document).ready(function () {

 $("#contact-form").submit(function (event) {

    // do not post the form and trigger full page refresh
    event.preventDefault();

    var formData = ..  // construct some formData

    $.ajax({
       type: "POST",
       contentType: "application/json",
       url: "/homePage/contact",
       data: JSON.stringify(formData),
       dataType: "json",
       success: function (data) {
        console.info("SUCCESS : ", data);
       },
       error: function (e) {
        console.info("ERROR : ", e);
       }
   });    
 });
});

Для полного примера, как всегда, mkyong.com поможет вам :)

Большое вам спасибо, ваш ответ идеален, потому что теперь я узнаю о том, как использовать ajax в приложении Spring Boot mvc. Я хочу, чтобы вы могли добавить ссылку [mkyong.com/spring-mvc/spring-4-mvc-ajax-hello-world-example‌ /], чтобы ответ можно было снабдить хорошим руководством

— 11.03.2018 15:45

11.03.2018 15:25