ajax成功和location.Reload()后如何在div中顯示消息

Question

在 ajax 成功調用中，我正在執行 location.Reload()。 頁面重新加載后，我想顯示“數據上傳成功”的消息。 但是我的頁面被重新加載並且消息被丟棄。

var data = {
    "strSelectedIds": selectedArray.join(',')
};
var countofProcessedRecords = selectedArray.length;
$("#divLoader").removeClass("display-none");
$.ajax({
    url: UrlSettings.ProcessSubscriptioData,
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    data: JSON.stringify(data),
    success: function (response) {
        location.reload();
        $("#msg").append(
            '<div class="alert alert-success hideit alertSuc">' + countofProcessedRecords + 'subscriptions uploaded successfully.</div >')
        setTimeout(function () {
            $("#divLoader").addClass("display-none");
        }, 500);

    },
    error: function (e) {
        $("#divLoader").addClass("display-none");
    }
});

任何人都可以幫我解決這個問題。

先感謝您..

Answer 1

我認為您應該使用 load() 而不是 location.reload() 因為 load() 將在 div 中顯示您想要的內容而 location.reload 將刷新整個頁面這是 load() 的一些示例：在 HTML 中代碼 ：

<div id="display-content"></div>

在 Jquery 中，您將需要這樣的東西：

$("#display-content").load().fadeIn("fast");

您還可以在 load() 中加載文件，例如：

var id = "<?php echo $_GET['id'];?>";
                                                                          
$('#display-content').load('view.php?id='+id).fadeIn("slow");

                                                                                        
                                                                                    

Answer 2

為了在重新加載后幸存下來，您需要使用像window.localStorage這樣的持久存儲。 然后，您將一個true值保存到存儲中，並在重新加載時檢查該值是否為true 。

因此，在成功調用 Ajax 之后，但在重新加載之前保存值： localStorage.ajaxSuccess = 'true';

然后在重新加載后，您可以檢查該值是否為真，並顯示消息：

if (localStorage.ajaxSuccess === 'true') {
// Display the message here
}

然而，這種方法受瀏覽器兼容性的影響。 有些用戶可以禁用 localStorage 或在隱身模式下使用 Safari。 因此，另一種方法是使用參數而不是page.reload()加載 URL： www.example.com/uploadPage/?ajaxSuccess

並在重新加載后檢查 URL 是否包含ajaxSuccess字符串。

Answer 3

使用 SessionStorage 像這樣跟蹤：

    var data = {
    "strSelectedIds": selectedArray.join(',')
    };
    var countofProcessedRecords = selectedArray.length;
    $("#divLoader").removeClass("display-none");
    $.ajax({
    url: UrlSettings.ProcessSubscriptioData,
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    data: JSON.stringify(data),
    success: function (response) {
    sessionStorage.successMessage= true;
        location.reload();

        setTimeout(function () {
            $("#divLoader").addClass("display-none");
        }, 500);

    },
    error: function (e) {
        $("#divLoader").addClass("display-none");
    }
});

$( function () {
        if ( sessionStorage.successMessage) {
             $("#msg").append(
            '<div class="alert alert-success hideit alertSuc">' + countofProcessedRecords + 'subscriptions uploaded successfully.</div >');
            sessionStorage.successMessage = false;
        }
    } 
);

Answer 4

在您重新加載頁面之前，這可能會有一些延遲。 像這樣：

$.ajax({
    type: 'POST',
    url: 'url',
    data: { id: id },
    success: function() { 
        $('#alertMessage').html('<p>success message</p>'); 
        setTimeout(function(){
           location.reload(); 
        }, 800);
    }
});