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

问题描述：

我有以下的AJAX调用...在AJAX DELETE请求之后，我如何重定向到提供的URI？

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

当成功回调被解雇，我有问题是成功的URL被称为使用DELETE动词，虽然这不是我想要的。有没有什么我错过让这个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

那么，为什么你使用DELETE，如果你需要GET？ –

AJAX调用从数据库中删除记录。如果删除成功，我需要将浏览器重定向到列表页面。 –

你确定'这是你在'成功'期待的内容吗？ 'this'是'jqXHR'对象，默认情况下在'$ .ajax（）'调用的'success'中。 – guest271314

答

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

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

相关推荐