如何在JSON解析过程中为index.js添加加载符号

1. 在Razor页面添加加载提示元素 #

先在页面中添加默认隐藏的加载提示容器，放在展示数据的container附近，可搭配简单动画提升体验：

<div id="container"></div>
<!-- 加载提示组件，默认隐藏 -->
<div id="loading" style="display:none; text-align:center; padding:20px;">
    <div style="border:4px solid #f3f3f3; border-top:4px solid #3498db; border-radius:50%; width:40px; height:40px; animation: spin 1s linear infinite; margin:0 auto;"></div>
    <p>加载中...</p>
</div>

<style>
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("create", data);
    }
}

2. 修改index.js控制加载显示/隐藏 #

由于$.getJSON是异步请求，必须在请求完成（无论成功或失败）后再隐藏加载符号，否则会直接跳过加载状态：

function create(data){
    // 发起请求前显示加载符号
    $('#loading').show();

    $.getJSON(FN, function(data1) {
        // 这里写入你原有的数据处理逻辑，比如把data1渲染到container中
        // 示例：$('#container').html(JSON.stringify(data1));
    })
    .done(function() {
        // 请求成功完成后隐藏加载
        $('#loading').hide();
    })
    .fail(function() {
        // 请求失败时也隐藏加载，避免一直显示
        $('#loading').hide();
        // 可选：添加错误提示
        // alert('数据加载失败，请稍后重试');
    });
}

替代方案：用$.ajax更灵活控制 #

如果需要更精细的请求流程控制，可使用$.ajax替代$.getJSON，通过complete回调统一处理加载隐藏：

function create(data){
    $('#loading').show();

    $.ajax({
        url: FN,
        dataType: 'json',
        success: function(data1) {
            // 处理返回的数据
            // ...
        },
        complete: function() {
            // 请求完成（成功/失败）后统一隐藏加载
            $('#loading').hide();
        }
    });
}

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