通过Ajax定时轮询更新HTML元素：根据GET结果切换空心/实心圆

现有代码的核心问题 #

• 异步请求逻辑错误：if (getState == 0) 是拿函数本身和0比较，完全没用到AJAX返回的data值；且AJAX是异步操作，外部判断会在请求完成前执行，完全无效。
• 未实际修改DOM元素样式：仅定义了state变量，但未将类名应用到#state元素上。
• 缺少定时轮询逻辑：没有实现每5秒调用一次状态查询的功能。
• 控制台出现undefined是因为getState函数无返回值，调用时控制台会输出函数返回结果（即undefined），再加上success回调里的console.log(data)输出数字，因此分两行显示。

修正后的完整代码 #

<style>
    .emptycircle {
        border-radius: 50%;
        height: 20px;
        width: 20px;
        border: 2px solid red;
    }
    .fullcircle {
        border-radius: 50%;
        height: 20px;
        width: 20px;
        border: 2px solid red;
        background-color: #f00;
    }       
</style>

<p id="state" class="emptycircle"></p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function updateState() {
        $.ajax({
            url: '/state',
            type: 'GET',
            success: function(data) {
                // 转换为数字类型，避免字符串判断出错
                const stateValue = parseInt(data, 10);
                console.log(stateValue);
                
                const stateElement = $('#state');
                if (stateValue === 0) {
                    stateElement.removeClass('fullcircle').addClass('emptycircle');
                } else if (stateValue === 1) {
                    stateElement.removeClass('emptycircle').addClass('fullcircle');
                }
            },
            // 处理请求失败场景，避免无反馈
            error: function() {
                console.log('状态接口请求失败');
            }
        });
    }

    // 页面加载后立即执行一次，之后每5秒轮询
    $(document).ready(function() {
        updateState();
        setInterval(updateState, 5000);
    });
</script>

关键修改点说明 #

1. 函数重命名：将getState改为updateState，更贴合"获取状态并更新DOM"的实际功能。
2. 异步逻辑修正：把状态判断和DOM更新逻辑放在AJAX的success回调内，确保使用请求返回的真实数据。
3. 类型转换：用parseInt(data, 10)将返回值转为数字类型，避免因返回字符串（如"0"、"1"）导致判断失效。
4. DOM样式切换：使用jQuery的removeClass和addClass方法切换元素类名，保证状态切换时样式正确更新。
5. 定时轮询实现：页面加载完成后先执行一次状态更新，再通过setInterval设置每5秒执行一次，确保初始状态正确显示。
6. 错误处理：添加error回调处理请求失败的情况，便于调试排查问题。

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