As shown in the figure, this is my button group. When I click day / week / month, different data will be displayed in the white area of the figure below.

However, when we switch to display data, there will be several problems: 1. When the background interface is not available, the loading waiting chart should be displayed. 2. When the background interface passes, but the returned data is empty, "no data..." should be displayed. 3. When clicking the button to switch, if there is data in the last request, the data in the last request should be cleared. If there is no data in the last request (no data after the interface passes), then "no data... (i.e. clear the last data when data.length == 0)" will be displayed.

See demo:

 function virusdiv(time) {   
        if (virsus_type.length == 0) {
            virsus_type = "day";
        }
        else {
            virsus_type = time;
        }
        $.ajax({
            url: "/main/rank/virus?option=" + virsus_type,
            dataType: "json",
            type: "GET",
            beforeSend: function () { 
                if (virsus_index == 0) {   //Do not display the loading waiting graph when switching
                    $("#v0").append('<img id="virus_infect_loading_img" src="/static/image/mainindex/fp27.gif"  style="position:relative;top: 56px;width:70px" />');
                }
            },
            success: function (data) {
                if (data.status == 0) {
                    $("#virus_infect_loading_img").remove();
                    //When switching, if there is data return, clear the last "no data..."
                    if(typeof($("#virus_infect_loading_msg")) != "undefined") {
                        $("#virus_infect_loading_msg").remove();
                    }
                    $("#v0").append('<span id="virus_infect_loading_msg" style="position:relative;top:80px;font-size: 15px;color: #999; "> '+' no data temporarily... '+' < span > ';
                    var viruses = [];
                    var types = [];
                    var infects = [];
                    var codearr = [];
                     //Clear the last data if no data is returned during switching
                    if(data.data.length == 0){
                          $(".virus_form").remove();
                     }
                    if (data.data.length != 0) {
                         $("#virus_infect_loading_msg").remove();
                         //Clear the last data when switching, only the data of the new request will be displayed
                         if(typeof ($(".virus_form")) != "undefined"){$(".virus_form").remove(); }
                        for (var i = 0; i < data.data.length; i++) {
                            viruses[i] = data.data[i].virus;   //Get virus name array
                            types[i] = data.data[i].type;          //Virus type code acquisition
                            codearr[i] = virus_code_transform(types[i]);    //Type code corresponding description acquisition
                            infects[i] = data.data[i].infect;      //Infection number acquisition
                            $("#v0").append("<div class='col-xs-12 virus_form' style='margin-bottom:-18px;margin-top:4px;'><div class='col-xs-4 col-lg-4 col-md-4 col-sm-4' style='overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>" + viruses[i] + "</div><div class='col-xs-4 col-lg-4 col-md-4 col-sm-4' style='padding-left:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left'>" + codearr[i] + "</div><div class='col-xs-4 col-lg-4 col-md-4 col-sm-4' style='color: #EE4E50;padding-right: 52px;font-weight:bold;text-align: right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>"
                                    + infects[i] + "</div><hr style='border-bottom:1px dashed #EBEBF5;margin-top: 26px'></div>");
                        }
                    }
                } else {
                    micro.tips(222);
                }
            },
            error: function (data) {
                //Request error handling

            }
        })
        virsus_index++;
    }

 <div class="col-xs-4">
        <span class="dateCircle5" id="virus_color_change0" style="display: inline-block;color: white;font-size: 12px;background-color: #4B7EFE;margin-right:-4px;"><a id="virus_font_change0" style="color: white;" onclick="virusdiv('day')" href="#"> days</a></span>
        <span class="dateCircle6" id="virus_color_change1" style="font-size: 12px;background-color: #EAEDF4;display: inline-block" ><a id="virus_font_change1" style="color: black;" onclick="virusdiv('week')" href="#"> week</a></span>
         <span class="dateCircle8" id="virus_color_change2" style="font-size: 12px;background-color: #EAEDF4;display: inline-block" onclick="virus_color_change_month()"><a id="virus_font_change2" style="color: black;" onclick="virusdiv('month')" href="#"> month</a></span>
 </div>