थाइमेलीफ स्प्रिंग एमवीसी AJAX फॉर्म और उनके त्रुटि संदेशों को संभालने के लिए अनुशंसित तरीका

Question

चीजों के थाइमेलीफ पक्ष पर AJAX रूपों और उनके त्रुटि संदेशों को संभालने का अनुशंसित तरीका क्या है?

मेरे पास वर्तमान में एक स्प्रिंग नियंत्रक है जो फ़ील्ड और उनके संबंधित त्रुटि संदेशों का JSON अवलोकन देता है, लेकिन पूरी तरह से हस्तलिखित JQuery (या केवल नियमित जावास्क्रिप्ट) का उपयोग करने का सहारा लेना थोड़ा सा गलत लगता है, और धीमा लगता है; विशेष रूप से आवेदन में होने वाली बड़ी संख्या में फॉर्मों के कारण।

Answer 1

मुझे क्या करना है जब कोई त्रुटि होती है तो पूरे फॉर्म को प्रतिस्थापित किया जाता है। निम्नलिखित एक सुपर आदिम उदाहरण है। मैं एक फॉर्म प्रस्तुत करने के लिए टुकड़ों का एक टन उपयोग नहीं करने जा रहा हूं ... बस इसे सरल रखना।

यह एक वसंत में लिखा गया था 4.2.1 और 2.1.4 Thymeleaf

एक बुनियादी वर्ग एक उपयोगकर्ता की जानकारी प्रपत्र का प्रतिनिधित्व: 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; 
} 

नियंत्रक: 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"; 
    } 
} 

फ़ाइल प्रपत्र और सफलता संदेश प्रस्तुत करने के लिए प्रयुक्त फ़ाइल: खंड/उपयोगकर्ता.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> 

जेएस कोड फॉर्म एक्शन विशेषता में दिए गए यूआरएल में फॉर्म जमा करेगा। जब प्रतिक्रिया जेएस कॉलबैक पर वापस आती है, तो किसी भी त्रुटि की जांच करें। यदि त्रुटियां हैं, तो प्रतिक्रिया के साथ फ़ॉर्म को प्रतिस्थापित करें।

(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)); 

फिर, यह केवल एक मूल उदाहरण है। जैसा ऊपर बताया गया है, इस बारे में जाने का कोई सही या गलत तरीका नहीं है। यह वास्तव में मेरा पसंदीदा समाधान नहीं है, मैं निश्चित रूप से कुछ बदलाव करूँगा, लेकिन सामान्य विचार वहां है।

नोट: मेरे जेएस कोड में भी एक दोष है। यदि आप फ़ॉर्म से प्रतिक्रिया के साथ फॉर्म को प्रतिस्थापित करते हैं, तो फॉर्म हैंडलर सबमिट किया गया नया प्रतिस्थापित फॉर्म पर लागू नहीं किया जाएगा। आपको यह सुनिश्चित करने की आवश्यकता होगी कि यदि आप इस मार्ग पर जा रहे हैं, तो फॉर्म को बदलने के बाद फॉर्म हैंडलर को ठीक से पुनः आरंभ करें।

Answer 2

इस पर बहुत कम दस्तावेज लेकिन यदि आप पहले से ही वेब प्रवाह से परिचित हैं, तो आपको और आवश्यकता नहीं हो सकती है। मुझे यकीन नहीं है कि यह तकनीक थाइमेलीफ में सामान्य बीन बाध्यकारी के साथ कैसे काम करती है। मुझे एक पूर्ण पालतू-क्लिनिक डेमो ऐप का उपयोग करना अच्छा लगेगा, इसलिए मैं नियंत्रकों को देख सकता हूं।

docs