2017-02-22 74 views
0

我有以下的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 
+0

那麼,爲什麼你使用DELETE,如果你需要GET? –

+0

AJAX調用從數據庫中刪除記錄。如果刪除成功,我需要將瀏覽器重定向到列表頁面。 –

+0

你確定'這是你在'成功'期待的內容嗎? 'this'是'jqXHR'對象,默認情況下在'$ .ajax()'調用的'success'中。 – guest271314

回答

0

這不是客戶端問題,而是服務器重定向由於方法調用不好而導致的離子問題。在響應者的大量幫助下,我能夠確定成功回調並未實際發生 - 服務器正在嘗試做其他事情。

相關問題