在AJAX DELETE请求之后，如何重定向到提供的URI？

Question

I have the following AJAX call...

remove() {
    $.ajax({
        url: this.deleteUri,
        type: `DELETE`,
        contentType: `application/json; charset=utf-8`,
        cache: false,
        success: () => {
            if (this.successUri) { UrlHelper.go(this.successUri); }
        },
        error: (xhr, status) => {
            this.showFailed();
        }
    });
}

UrlHelper.go is simply wrapping location.href as follows...

UrlHelper.go = function (url) {
    location.href = url;
};

When the success callback is fired the problem that I have is that the success URL is being called using a DELETE verb although this is not what I want. Is there something I'm missing to make this a GET?

NOTE: This is using arrow functions and ES6 calls.

The issue is that the URL in this.successUri is called using an Http DELETE verb and not an Http GET verb. As it is a redirect I need to call it with Http GET. There is nothing at that URL that responds to an Http DELETE verb.

Here's the whole component this is part of...

/// <reference path="../../../node_modules/jquery/dist/jquery.js" />
/// <reference path="../../../node_modules/bootbox/bootbox.js" />

import Guard from "../helpers/guard";
import UrlHelper from "../helpers/url-helper";

export default class DeleteButton {

    /**
     * Creates an instance of DeleteButton.
     * 
     * @param {object} element The DOM element to make into a delete button.
     * 
     * @memberOf DeleteButton
     */
    constructor(element) {
        Guard.throwIf(element, "element");

        this.deleteUri = element.getAttribute("data-delete-uri") || UrlHelper.current.url().split('?')[0];        
        this.title = element.getAttribute("data-title") || `Delete the item?`;
        this.cancelText = element.getAttribute("data-cancel") || `Cancel`;
        this.confirmText = element.getAttribute("data-confirm") || `Remove`;
        this.message = element.getAttribute("data-message") || `Do you want to delete the item? This cannot be undone.`;
        this.successUri = element.getAttribute("data-success-uri");
        this.errorMessage = element.getAttribute("data-error-message") || `Unable to complete operation.`;

        $(element).click(this.confirmRemove.bind(this));
    }

    /**
     * Confirms deletion of an item.
     * 
     * @memberOf DeleteButton
     */
    confirmRemove() {
        window.bootbox.confirm({
            title: this.title,
            message: this.message,
            buttons: {
                cancel: {
                    label: `<i class=\"fa fa-times\" aria-hidden=\"true\"></i>${this.cancelText}`
                },
                confirm: {
                    className: `btn-danger`,
                    label: `<i class=\"fa fa-check\" aria-hidden=\"true\"></i>${this.confirmText}`
                }
            },
            callback: (result) => {
                if (result) { this.remove(); }
            }
        });
    }

    /**
     * Removes an item from the server.
     *
     * @memberOf DeleteButton
     */
    remove() {
        $.ajax({
            url: this.deleteUri,
            type: `DELETE`,
            contentType: `application/json; charset=utf-8`,
            cache: false,
            success: () => {
                if (this.successUri) { UrlHelper.go(this.successUri); }
            },
            error: (xhr, status) => {
                this.showFailed();
            }
        });
    }

    /**
     * Shows failure of deletion.
     * 
     * @memberOf DeleteButton
     */
    showFailed() {
        window.bootbox.alert({
            message: this.errorMessage,
            size: `small`,
            backdrop: true
        });
    }
}

and it's linked to the following HTML...

    <a class="js-delete-button btn btn-danger" data-id="@Model.ID" data-title="Stop the Route?" data-confirm="Stop Route" data-success-uri="/routes"
        data-message="Do you want to stop running this route? Routes with no journeys will be permanently deleted. This cannot be undone."><i class="fa fa-ban" aria-hidden="true"></i>Stop Running</a>

Which, after the delete operation succeeds, is then generating the following request...

:authority:localhost:44333
:method:DELETE
:path:/Routes?Message=The%20route%20requested%20has%20been%20stopped.
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:en-GB,en-US;q=0.8,en;q=0.6
cache-control:no-cache
content-type:application/json; charset=utf-8
origin:https://localhost:44333
pragma:no-cache
referer:https://localhost:44333/Route/30005?Message=A%20new%20route%20has%20been%20created.%20Now%20download%20and%20complete%20the%20Timetable%20template%20to%20configure%20all%20of%20the%20stops%20and%20journey%20times.
user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
x-requested-with:XMLHttpRequest

Answer 1

This is not a client side problem but a server redirection issue due to a bad method call. With a lot of help from responders I was able to determine that the success callback wasn't actually firing - the server was trying to do something else.