javascript - 即使对 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 Controller 发出 POST 请求时，我都会从错误函数中收到“创建请求时出错”消息，这是为什么？

Answer 1

通过查看您的代码，在我看来，以下代码行导致了问题，

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

在成功的情况下，$(this)不会引用当前元素，您可以做的是将$(this)的引用保存在外部，然后您可以像下面一样调用使用

.
.
var $this = $(this);
$.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);
        }
    });

如果仍然无法正常工作，请告诉我...