jQuery中发起POST请求后显示用户提示的代码位置问询

嘿，很高兴帮你解决这个问题！刚接触jQuery的话，这个需求其实很容易实现——你只需要把提示代码放在发起POST请求的最前面就行，这样用户一触发下拉框的change事件，就能立刻看到加载提示，不用等请求开始处理。

方法一：直接修改目标表格显示提示 #

这种方式适合用表格区域临时展示加载状态，请求完成后再替换为真实数据：

$('#cur_select').on('change', function() {
    // 1. 立即显示加载提示（放在POST请求前，确保用户马上看到）
    $("#mytable").html('<p style="text-align:center;">正在获取数据，请稍候...</p>');
    
    // 2. 发起POST请求
    $.post("getTable.php", { value: this.value })
    .done(function(data) {
        // 请求成功：用真实数据替换提示
        $("#mytable").html(data);
    })
    .fail(function() {
        // 可选：请求失败时显示错误提示
        $("#mytable").html('<p style="text-align:center; color:red;">获取数据失败，请重试</p>');
    });
});

方法二：使用独立的提示元素 #

如果不想占用表格区域，可以单独添加一个提示容器，请求前后控制它的显示/隐藏：

首先在页面里加一个提示元素（默认隐藏）：

<div id="loading-tip" style="display:none; color:#666; margin:10px 0;">正在获取数据，请稍候...</div>

然后修改JS代码：

$('#cur_select').on('change', function() {
    // 1. 显示加载提示
    $("#loading-tip").show();
    
    // 2. 发起POST请求
    $.post("getTable.php", { value: this.value })
    .done(function(data) {
        $("#mytable").html(data);
    })
    .fail(function() {
        $("#mytable").html('<p style="text-align:center; color:red;">获取数据失败，请重试</p>');
    })
    .always(function() {
        // 3. 请求完成（无论成功/失败）：隐藏提示
        $("#loading-tip").hide();
    });
});

关键说明 #

• 提示代码必须放在$.post()之前：这样能保证用户操作后立刻得到反馈，不会因为请求等待出现“无响应”的错觉。
• 记得处理请求失败的情况：用.fail()捕获错误，给用户明确的提示，避免一直停留在加载状态。
• .always()方法很实用：它会在请求完成（成功或失败）时执行，确保提示一定会被隐藏，不会一直留在页面上。

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