APIへのリクエストが成功したにもかかわらず、Ajaxの成功関数がトリガーされないのはなぜですか？

Question

私の成功関数がトリガされない理由はわかりません。私のAPIにPOSTリクエストをすると、すべてが計画通りに実行されても、エラー関数だけが実行されます。

これは私のjsです：

$("form").submit(function (env) { 
    env.preventDefault(); 
    $("#submitbtn").prop('disabled', true); 
    $("#form_result").text(""); 
    var request = JSON.stringify($("#newRequest-form").serializeObject()); 
    console.log(request); 
    $.ajax({ 
     method: "POST", 
     url: "/api/holidays", 
     data: request, 
     contentType: "application/json", 
     dataType: "json", 
     success: function() { 
      $("#form_result").text("Submitted succesfully"); 
      $(this).prop('display', 'hidden'); 
     }, 
     error: function (error) { 
      $("#form_result").text("Error: creating the request"); 
      $("#submitbtn").prop('disabled', false); 
     } 
    }); 
}); 

形式：

<div class="formcontainer"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <form class="form-horizontal" id="newRequest-form"> 
        <div class="form-group "> 
         <label class="control-label " for="reason"> 
          Reason 
         </label> 
         <textarea class="form-control" cols="40" id="reason" name="reason" rows="10" 
            required=""></textarea> 
        </div> 
        <div class="form-group "> 
         <label class="control-label " for="holidayType"> 
          Holiday Type 
         </label> 
         <select class="select form-control" id="holidayType" name="holidayType"> 
          <option value="Medical"> 
           Medical 
          </option> 
          <option value="Rest holiday"> 
           Rest holiday 
          </option> 
          <option value="Other"> 
           Other 
          </option> 
         </select> 
        </div> 
        <div class="form-group "> 
         <label class="control-label " for="startDate"> 
          Start Date 
         </label> 
         <input class="form-control" id="startDate" name="startDate" placeholder="DD/MM/YYYY" 
           type="text" required=""/> 
        </div> 
        <div class="form-group "> 
         <label class="control-label " for="endDate"> 
          End Date 
         </label> 
         <input class="form-control" id="endDate" name="endDate" placeholder="DD/MM/YYYY" type="text" 
           required=""/> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-10 col-sm-offset-2"> 
          <button class="btn btn-success btn-lg" id="submitbtn"> 
           Submit Request 
          </button> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-10 col-sm-offset-2"> 
          <div id="form_result"></div> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

そしてAPI：

@RestController 
public class AddHolidayRequestController { 

    @Autowired 
    private AddHolidayService addHolidayService; 

    @Autowired 
    private HolidayRepository holidayRepository; 

    @ResponseBody 
    @RequestMapping(value = "/api/holidays", method = RequestMethod.POST) 
    public ResponseEntity addHolidayRequest(@RequestBody HolidayFormData holidayFormData) { 
     HolidayRequest holidayRequest = new HolidayRequest(); 

     try { 
      holidayRequest = addHolidayService.isValid(holidayFormData); 
     } catch (UserNotFoundException e) { 
      System.err.println(e.getMessage()); 
     } 
     if (holidayRequest == null) 
      return new ResponseEntity(HttpStatus.BAD_REQUEST); 

     holidayRepository.save(holidayRequest); 

     return new ResponseEntity(HttpStatus.CREATED); 
    } 
} 

私はRESTコントローラへのPOST要求を行うたびに、私は "取得エラー機能からメッセージを作成する際にエラーが発生しました。なぜですか？あなたのコードを見ることによって

Answer 1

、コードの行の下に問題を引き起こしているように私には思える、

成功インサイド

 $(this).prop('display', 'hidden'); 

、$(this)文句を言わないあなたが何ができるかを現在の要素が$（の参照を保存している参照これは）外にして、あなたはまだそれが...あなたは、ブラウザのコンソールに表示さんは何