ASP.NET Core Ajax“完成”，“成功”或“错误”未触发

Question

Here is the thing : I've got an ajax script which sends a "DELETE" request to an API controller, the thing I wanted to remove is indeed deleted from the database and the API returns a 200 OK Response, but no event will fire and I genuinely don't know why.

Here is the script called :

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $('.delete-project').click(function (e) {
                $.ajax({
                    url: '/api/project/' + id,
                    method: 'DELETE',
                    async: true,
                    dataType: 'text',
                    success: function () {
                        console.log("Success reached");
                    }
                }).done(function () {
                    alert("done");
                    console.log("done");
                }).error(function () {
                    console.log("failed");
                });

                return false;
            });
        });
    </script>
}

I have also tried with "async: false" but unfortunately, it didn't solve my problem.

(Also, the return false is because I'm clicking on a button that is embedded inside a clickable list, it is to prevent from being redirected after clicking on the button, as if you've clicked anywhere else on the list. I wanted to point that out before I get any question)

Here is the code executed by the API

// DELETE api/<controller>/5
    [HttpDelete("{id}")]
    public async Task<IActionResult> Delete(int id)
    {
        var project = await _unitOfWork.Projects.GetById(id);
        if (project == null)
            throw new HttpRequestException();
        else { 
            await _unitOfWork.Projects.Delete(project);
            await _unitOfWork.SaveChangesAsync();

            return Ok("Ok");
        }
    }

Also, there is nothing in the console. No error message and no message that should appear from the console.log() calls.

This is what is shown in the "network" tab :

Here are the details about the 200 OK Response in network tab, on Firefox

Answer 1

The jQuery documentation only lists these as valid values for the method param: "GET" , "POST" , or "PUT" .

It sounds like you'll want to use XMLHttpRequest directly instead if you want to do a "DELETE" . It's quite trivial:

$('.delete-project').click(function (e) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log("Succeeded");
            } else {
                console.log("Failed");
            }
        }
    };
    xhr.open("DELETE", "/api/project/" + id);
    xhr.send();

    return false;
});

(You might be able to use the load and error events instead of readystatechange ; I've never tried them with "DELETE" so...)