Thymeleaf Spring MVC AJAX Formları ve hata mesajlarının işlenmesinde önerilen yol

Question

AJAX formlarını ve hata mesajlarını Thymeleaf tarafında ele almanın önerilen yolu nedir?

Şu anda bir JSON alanları ve bunların hata iletilerini genel olarak döndüren bir Spring denetleyicisine sahibim, ancak tamamen elle yazılmış bir JQuery (veya yalnızca normal Javascript) kullanmaya başvurmak zorunda kaldığımda, biraz yanlış ve yavaş geliyor; Özellikle uygulamada sahip olmayı planladığım büyük miktarda formdan dolayı.

Answer 1

Ne yapmaktan hoşlandığım, bir hata oluştuğunda formun tamamını değiştirmektir. Aşağıdaki süper ilkel bir örnektir. Bir formu oluşturmak için bir parça parça kullanmıyorum ... sadece basit tutmak.

Bu Spring yazılmış 4.2.1 ve Thymeleaf 2.1.4

bir kullanıcı bilgi formu temsil eden bir temel sınıf: UserInfo.java

package myapp.forms; 

import org.hibernate.validator.constraints.Email; 
import javax.validation.constraints.Size; 
import lombok.Data; 

@Data 
public class UserInfo { 
    @Email 
    private String email; 
    @Size(min = 1, message = "First name cannot be blank") 
    private String firstName; 
} 

kontrolörü: UsersAjaxController.java

import myapp.forms.UserInfo; 
import myapp.services.UserServices; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Controller; 
import org.springframework.ui.Model; 
import org.springframework.validation.BindingResult; 
import org.springframework.web.bind.annotation.*; 

import javax.transaction.Transactional; 

@Controller 
@Transactional 
@RequestMapping("/async/users") 
public class UsersAjaxController { 
    @Autowired 
    private UserServices userServices; 

    @RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST) 
    public String saveUserInfo(@Valid @ModelAttribute("userInfo") UserInfo userInfo, 
          BindingResult result, 
          Model model) { 
    // if any errors, re-render the user info edit form 
    if (result.hasErrors()) { 
     return "fragments/user :: info-form"; 
    } 
    // let the service layer handle the saving of the validated form fields 
    userServices.saveUserInfo(userInfo); 
    return "fragments/user :: info-success"; 
    } 
} 

Biçim ve başarı iletisini oluşturmak için kullanılan dosya: fragments/user.html

<div th:fragment="info-form" xmlns:th="http://www.thymeleaf.org" th:remove="tag"> 
    <form id="userInfo" name="userInfo" th:action="@{/async/users/saveUserInfo}" th:object="${userInfo}" method="post"> 
    <div th:classappend="${#fields.hasErrors('firstName')}?has-error"> 
     <label class="control-label">First Name</label> 
     <input th:field="*{firstName}" type="text" /> 
    </div> 
    <div th:classappend="${#fields.hasErrors('first')}?has-error"> 
     <label class="control-label">Email</label> 
     <input th:field="*{email}" ftype="text" /> 
    </div> 
    <input type="submit" value="Save" /> 
    </form> 
</div> 

<div th:fragment="info-success" xmlns:th="http://www.thymeleaf.org" th:remove="tag"> 
    <p>Form successfully submitted</p> 
</div> 

JS kodu, formu form eylem özniteliğinde sağlanan URL'ye gönderir. Yanıt JS geri çağrıya döndüğünde, herhangi bir hata olup olmadığını kontrol edin. Hata varsa, formu yanıttan biriyle değiştirin.

(function($){ 
    var $form = $('#userInfo'); 
    $form.on('submit', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: $form.attr('action'), 
     type: 'post', 
     data: $form.serialize(), 
     success: function(response) { 
     // if the response contains any errors, replace the form 
     if ($(response).find('.has-error').length) { 
      $form.replaceWith(response); 
     } else { 
      // in this case we can actually replace the form 
      // with the response as well, unless we want to 
      // show the success message a different way 
     } 
     } 
    }); 
}) 
}(jQuery)); 

Yine, bu yalnızca basit bir örnektir. Yukarıdaki yorumlarda belirtildiği gibi, bunun hakkında doğru ya da yanlış bir yol yoktur. Bu benim de tercih ettiğim çözüm değil, kesinlikle yapacağım bir kaç şey var, ama genel fikir var.

NOT: JS kodumda da bir kusur var. Formu, yanıtın biriyle değiştirirseniz, form teslim işleyicisi, yeni değiştirilen forma uygulanmayacaktır. Bu rotayı gerçekleştiriyorsanız, formu değiştirdikten sonra form işleyicisini doğru şekilde yeniden başlattığınızdan emin olmanız gerekir.

Answer 2

Bu konu hakkında çok az bilgi edinin, ancak Web Akışını zaten biliyorsanız, daha fazlasına ihtiyacınız olmayabilir. Bu tekniğin, Thymeleaf'taki normal fasulyeli bağlarla nasıl çalıştığından emin değilim. Denetleyicileri görebilmem için tam bir evcil hayvan kliniği demo uygulaması kullanmayı çok isterim.

docs