页面刷新后再显示Alert提示的实现方法咨询

我尝试了以下这段jQuery代码，但当前效果是先显示提示信息再刷新表单。我需要实现先刷新页面，之后再显示提示信息的效果，请问该如何实现？

代码如下：

$(document).on('click', '#insert', function(){ 
var address = $('#to_address').val(); 
var amount = $('#amount').val(); 
var this_email = $('#this_email').val(); 
var this_bal = $('#this_bal').val(); 
if(address != '' && amount != '' && this_email != '' && this_bal != '' ) { 
$.ajax({ 
url:"WithdrawChk.php", method:"POST", 
data:{address:address, amount:amount, this_email:this_email, this_bal:this_bal}, 
success:function(data) { 
$('#alert_message').html('<div class="alert-success">'+data+'</div>'); 
} 
}); 
setInterval(function(){ $('#alert_message').html(''); }, 5000); 
} else { 
alert("All Fields are required"); 
} 
});

嘿，我完全懂你的需求——现在你的代码是AJAX请求成功后先展示提示，再触发页面刷新，但你想要反过来：先完成页面刷新，再显示成功提示。这里的核心问题是：页面刷新后当前页面的所有DOM元素和临时变量都会被重置，直接刷新的话之前的提示信息会丢失，所以我们需要用「本地存储」把提示信息暂存起来，等页面刷新完成后再读取并展示。

具体实现分两步：

1. 修改点击事件的AJAX回调逻辑 #

在AJAX请求成功后，不要直接显示提示，而是把提示内容存入sessionStorage（会话存储，页面刷新后仍保留，关闭页面自动清除），然后触发页面刷新：

$(document).on('click', '#insert', function(){ 
    var address = $('#to_address').val(); 
    var amount = $('#amount').val(); 
    var this_email = $('#this_email').val(); 
    var this_bal = $('#this_bal').val(); 
    if(address != '' && amount != '' && this_email != '' && this_bal != '' ) { 
        $.ajax({ 
            url:"WithdrawChk.php", 
            method:"POST", 
            data:{address:address, amount:amount, this_email:this_email, this_bal:this_bal}, 
            success:function(data) { 
                // 把提示信息存入会话存储
                sessionStorage.setItem('withdrawSuccessAlert', data);
                // 触发页面刷新
                window.location.reload();
            } 
        }); 
    } else { 
        alert("All Fields are required"); 
    } 
});

2. 页面加载完成后读取存储并显示提示 #

在页面初始化时，检查sessionStorage里是否有我们存的提示信息，如果有就展示出来，同时设置定时器5秒后清空提示和存储：

$(document).ready(function() {
    // 读取存储的提示信息
    var alertContent = sessionStorage.getItem('withdrawSuccessAlert');
    if (alertContent) {
        // 显示提示
        $('#alert_message').html('<div class="alert-success">'+alertContent+'</div>');
        // 5秒后清空提示并移除存储的内容
        setTimeout(function(){ 
            $('#alert_message').html('');
            sessionStorage.removeItem('withdrawSuccessAlert');
        }, 5000);
    }
});

补充说明 #

• 为什么用sessionStorage而不是localStorage？因为sessionStorage的生命周期和页面会话绑定，刷新页面不会丢失，但关闭页面后自动清除，非常适合这种一次性的操作提示；而localStorage会一直保留在浏览器中，除非手动删除，容易导致重复显示旧提示。
• 如果你说的「刷新表单」是指重置表单内容而非整个页面刷新，那逻辑会更简单：先调用$('#yourFormId')[0].reset()重置表单，再显示提示即可，但从你的描述来看应该是需要整个页面刷新的场景。

内容的提问来源于stack exchange，提问作者ali