AJAX请求数据时遇到的问题

做一个详情页面，页面通过AJAX请求获取数据，然后回填到页面上。

这是请求的url获得的数据

页面代码

<style>
.article-content{
    padding:10px;
    border-radius: 3px;
    opacity: 1;
    min-height: 160px;
    color: #3d464d;
    background-color:#e4e4e4c9;
}
.legend-title{
    font-size: 13px !important;
}
</style>
<div >
    <div style="padding: 10px 0 0">
        <h2 style="text-align: center;" class="article_title"></h2>
        <div style="margin-top: 10px;">
            <span class="article_create_datetime" style="color:#205FB5;"></span>&nbsp;
            <span class="article_source" style="color:#205FB5; margin-left:20px;"></span>&nbsp;
            <span class="article_status" style="color:#205FB5; margin-left:20px;"></span><br>
        </div>
        <hr style="color: #999;margin-top: 5px;margin-bottom: 5px;">
        <div class="article-content"></div>
    </div>
</div>
<script>

    var article_status_map = {
            0:'待发布',
            1:'已发布'
    }
    
    //页面数据初始化
    function initValue(data){
        $('.article_title').html(data.article_title);
        $('.article_create_datetime').html("创建时间：" + data.article_create_datetime);
        $('.article_source').html("来源：" + data.article_source);
        $('.article_status').html("发布状态：" + article_status_map[data.article_status]);
        $('.article-content').html(data.article_content);
    }
    function getDetail(){
        var detail;
        $.ajax({
            url:'http://XX.XX.XX.XX:20080/notice/detail/'+'#(article_id)',
               type:'GET',
               async:false,
               success:function(result){
                   if(result.success){
                       detail = result.data;
                   }
               }
           });
        return detail;
    }
    
    $(function(){
        var layer = layui.layer;
        $('#ewn-notice-linkage-detail-window-footer .btn-submit').hide();
        var $window = $('#ewn-notice-linkage-detail-window').closest('.window');
        //初始化页面数据
        let detail = getDetail();
        if(detail != null){
            initValue(detail);
        }else{
            layer.msg('获取数据失败', {icon: 5});
        }
    });
</script>

 

这是其中AJAX请求的代码

 当async使用默认值true时，这个AJAX请求是一个异步的请求，将会导致回填报错。因为后面使用detail的时候里面还是没值的，所以出现这样的情况。

将async设置成false后，发送的的是同步请求，浏览器将会等待请求完成后再做后面的事情，这样页面就正常显示了。