ajax调用后全局变量uriEncodedLink被重置为null问题咨询

问题根因 #

你的代码问题核心并非AJAX调用清除了全局变量，而是AJAX请求成功后执行的$('form').submit()触发了表单默认的同步提交行为，会导致整个页面刷新，所有JS运行时存储的全局变量都会被重置，因此你挂载在window上的uriEncodedLink自然会变成null。

解决方案 #

方案1：阻止表单默认提交，手动触发完成事件（优先推荐） #

不需要修改现有事件的绑定逻辑，仅调整AJAX成功回调的逻辑，取消表单同步提交避免页面刷新，直接手动触发wizard的完成事件即可，此时全局变量不会被重置：

success: function(d) {
    // 注释掉原有的表单提交代码，避免页面刷新
    // $('form').submit();
    // 手动触发完成事件，window.uriEncodedLink的值可正常保留
    $(document).trigger('finished.wizard');
}

方案2：使用localStorage持久化存储链接（兼容必须保留表单提交的场景） #

如果业务要求必须保留$('form').submit()的调用逻辑，可以将链接存储到本地持久化缓存中，页面刷新后也能正常读取：

1. 先修改赋值逻辑，同时写入全局变量和本地存储：

uriEncodedLink = "Link to be encoded"
window.uriEncodedLink = uriEncodedLink
// 写入本地存储
localStorage.setItem('pay_uriEncodedLink', uriEncodedLink)
console.log(window.uriEncodedLink)          

2. 再修改完成事件中的读取逻辑，优先读取本地存储的内容：

$(document).bind('finished.wizard', function () {
    $('.progress-bar').css({ width: '100%' });
    // 优先读取本地存储的链接，兜底取全局变量
    const payLink = localStorage.getItem('pay_uriEncodedLink') || window.uriEncodedLink;
    $('.innerform').html('<div class="finished"><div class="row clearfix">'+
        '<div class="col-md-12 column"><div class="panel panel-default">'+
        '<div class="panel-heading"><h2 class="panel-title"><span class="step-title">Almost Finished!</h2></div>'+
        '<div style="width: 100%; height: 1100px;">'+
        '<iframe id="cps-embed" src="'+payLink+'"' +
        'style="margin:0; width:100%; border:none;" scrolling="no" width="100%" height="1100px"></iframe>'+
        '</div></div></div></div></div></div>'
        ).css({opacity:'0',visibility:'visible'}).animate({opacity:'1'});
    // 用完后清除本地存储，避免数据残留
    localStorage.removeItem('pay_uriEncodedLink');
});

方案3：提前生成链接存入缓存 #

如果无法修改AJAX回调逻辑，可以将uriEncodedLink的生成逻辑提前到wizard流程的更早阶段，只要在页面刷新前写入localStorage，后续完成事件读取时都可以正常拿到值。

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