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让你满意:)

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

1 个答案: