使用 Thymeleaf 在 Spring Boot 中使用 Form 发送电子邮件

Question

我想使用 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 catering@catering.com, 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";
        }
    }

我没有得到想要的行为：虽然我的页面将保持不变，但我的页面正在重新加载。

我想命令控制器在不离开我的页面的情况下做某事。

我搜索了一下，发现可以将服务对象发送到我的页面，但如果有其他解决方案，我想避免使用此选项。

谢谢。

Answer 1

如果您不想刷新页面，则需要使用 AJAX 调用。

这意味着您想使用 javascript 拦截默认的 HTTP 表单发布行为（将执行整页刷新）。

为此，您需要：

• 删除表单上的操作标签（让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.log("SUCCESS : ", data);
         },
         error: function (e) {
          console.log("ERROR : ", e);
         }
     });    
   });
  });
  

举一个完整的例子，一如既往，mkyong.com 已经为您提供了覆盖 :)