Question

我有以下AJAX电话......

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只是将location.href包装如下......

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

当成功回调被触发时，我遇到的问题是使用DELETE动词调用成功URL，尽管这不是我想要的。我有什么东西可以让它成为一个GET吗？

注意：这是使用箭头功能和ES6呼叫。

问题是this.successUri中的URL是使用Http DELETE动词而不是Http GET动词调用的。由于它是重定向，我需要用Http GET调用它。该URL上没有任何内容可以响应Http DELETE动词。

这是整个组件，这是......的一部分。

/// <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
        });
    }
}

并且它链接到以下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>

在删除操作成功后，然后生成以下请求...

: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

这不是客户端问题，而是由于方法调用错误导致的服务器重定向问题。在响应者的大量帮助下，我能够确定成功的回调实际上并未触发 - 服务器正试图做其他事情。

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

1 个答案: