JQueryとSpring Controllerを使用してフォームを送信する方法

Question

ajax関数を無効にするとフォームが正常に送信される理由を理解するのが難しいです。私は入力フォームでajaxを有効にします。入力値は入力されません。私は提出されているFormDataをチェックするためにクローム開発ツールを使用しました。何も提出されていないことに気づいた。 したがって、私はそれらのフィールドを埋めるように私に要求するエラーを取得します。

<form method="post" th:object="${certificate}" 
     th:action="@{${action1}}" class="form-inline inline new-item editCert"> 
    <input type="hidden" th:field="*{id}"/> 
    <div th:replace="common/layout :: flash"></div> 
    <div class="flash"></div> 
    <fieldset> 
     <legend th:text="${heading}"> Personal Information</legend> 
     <div class="row" th:classappend="${#fields.hasErrors('fullName')}? 'error' : ''"> 
      <input type="text" class="form-control input-sm" th:field="*{fullName}" 
        placeholder="Full Name example Jane Doe"/> 
      <div class="error-message" th:if="${#fields.hasErrors('fullName')}" th:errors="*{fullName}"></div> 
     </div> 

     <div class="row" th:classappend="${#fields.hasErrors('gender')}? 'error' : ''"> 
      <select th:field="*{gender}" class="form-control input-lg "> 
       <option value="">[Select Gender]</option> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
      </select> 
      <div class="error-message" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}"></div> 
     </div> 
     <div class="row" th:classappend="${#fields.hasErrors('date')}? 'error' : ''"> 
      <input th:type="date" data-value="20/04/2015" class="form-control input-sm datepicker" th:field="*{date}" 
        placeholder="Date Of Birth"/> 
      <div class="error-message" th:if="${#fields.hasErrors('date')}" th:errors="*{date}"></div> 
     </div> 

Answer 1

コントローラ

@PostMapping(value = "/basicAjax.json") 
    @ResponseBody 
    public ResponseEntity<Object> addCertJson(@Valid @ModelAttribute CertificateProgramme certificate, BindingResult result, Principal principal) { 
     User user = (User) ((UsernamePasswordAuthenticationToken) principal).getPrincipal(); 
     certificate.setUser(user); 
     if (result.hasErrors()) { 
      List<String> errors = result.getAllErrors().stream() 
        .map(DefaultMessageSourceResolvable::getDefaultMessage) 
        .collect(Collectors.toList()); 
      return new ResponseEntity<>(errors, HttpStatus.BAD_REQUEST); 
     } else { 
      certificateService.save(certificate); 
      return new ResponseEntity<>(HttpStatus.ACCEPTED); 
     } 
    } 

JSスクリプト

var $form = $('.editCert'); 
var formData = $form.serialize(); 
var url = $form.attr('action'); 
var storage = {}; 
$.each($('.editCert').serializeArray(), function(i, field) { 
    storage[field.name] = field.value; 
}); 

$form.on('submit',function(e){ 
    e.preventDefault(); 
    $.ajax(url,{ 
      dataType: 'JSON', 
      data: storage, 
      type: "POST", 
     }).done(function(response){ 
      if(response.status === 'SUCCESS'){ 
       console.log('I am Okay' + response); 
        }else{ 
        console.log('Holly Molly'); 
        } 
     }).fail(function(jqXHR, textStatus, errorThrown){ 
      var errorInfo=""; 
      for(i =0 ; i <jqXHR.responseJSON.length ; i++){ 
          errorInfo += "<br>" + (i + 1) +". " + jqXHR.responseJSON[i]; 
         } 
        var $myerror = $form.find('.flash').addClass(' failure'); 
         $myerror.html("Please correct following errors: " + errorInfo); 
      }); 
    }); 

フォームは、私の問題を解決$関数に

$form.on('submit',function(e){ 
    e.preventDefault(); 
    $.each($(this).serializeArray(), function(i, field) { 
     storage[field.name] = field.value; 
    }); 
    console.log(storage); 
    $.ajax(url,{ 
      //dataType: 'json', 
      data: storage, 
      type: "POST", 
     }).done(function(response){ 
       console.log('I am Okay' + response); 
     }).fail(function(jqXHR, textStatus, errorThrown){ 
     console.log(jqXHR); 
      if(jqXHR.status === 400){ 
      var errorInfo=""; 
      for(i =0 ; i <jqXHR.responseJSON.length ; i++){ 
          errorInfo += "<br>" + (i + 1) +". " + jqXHR.responseJSON[i]; 
         } 
        var $myerror = $form.find('.flash').addClass(' failure'); 
         $myerror.html("Please correct following errors: " + errorInfo); 
      } 
      }); 
    }); 

を提出アヤックス提出にフォームの反復を移動しました