如何通过getElementById实现响应码200时修改按钮innerHTML？求助

我来帮你梳理下当前代码的问题，然后给出可行的修复方案：

现存问题点 #

1. 同步表单提交导致页面刷新
   你当前用的是type="submit"按钮，点击后会触发默认的表单提交，页面会立即刷新。这就导致你设置的加载动画刚显示就被刷新覆盖了，而且PHP输出的uniqueId函数是在表单提交后才渲染到页面的，这时候原按钮的点击事件早就触发过了，根本不会执行这个函数。

2. 按钮onclick参数错误
   按钮的onclick="uniqueId(<?php echo $btn1; ?>)"中，如果$btn1是类似btn_123的字符串ID，你没有加引号，JS会把它当成未定义的变量，直接触发语法错误，函数根本没法执行。正确写法应该是uniqueId('<?php echo $btn1; ?>')。

正确解决方案：使用AJAX异步提交 #

要实现“点击显示加载动画→请求成功后修改按钮文本”的效果，必须用AJAX异步提交，这样页面不会刷新，能完整保留交互状态。

1. 修改按钮HTML

把按钮类型从submit改成button，避免默认表单提交行为：

<button type="button" name="taskBtnn" id="<?php echo $btn1; ?>" value="<?php echo $catData['id'];?>" class="btn btn-info btn-sm togglebtn">Active</button>

2. 整合加载动画与AJAX请求的JS代码

$(document).ready(function(){
    // 给目标按钮绑定点击事件
    $(document).on("click", ".togglebtn", function(){
        const $currentBtn = $(this);
        const originalBtnText = $currentBtn.text();
        
        // 显示加载动画
        $currentBtn.html("<i class='fa fa-spinner fa-spin'></i> <i class='fa fa-spinner fa-spin'></i><i class='fa fa-spinner fa-spin'></i>");
        
        // 发送异步请求到PHP处理页面
        $.ajax({
            url: "你的处理文件.php", // 替换成你的PHP业务处理文件路径
            method: "POST",
            data: {
                taskBtnn: true,
                catId: $currentBtn.val() // 传递分类ID，对应原$catData['id']
            },
            // 请求成功的回调
            success: function(response, textStatus, xhr){
                // 检查响应状态码是否为200
                if(xhr.status === 200){
                    $currentBtn.html("approved");
                    // 可选：如果需要禁用按钮防止重复点击
                    // $currentBtn.prop("disabled", true);
                } else {
                    // 响应码不符，恢复原始按钮文本
                    $currentBtn.text(originalBtnText);
                }
            },
            // 请求失败的回调
            error: function(){
                $currentBtn.text(originalBtnText);
                alert("请求失败，请稍后重试");
            }
        });
    });
});

3. PHP业务处理页面（示例：handle_task.php）

<?php
if(isset($_POST['taskBtnn'])){
    // 这里写入你的业务逻辑，比如更新数据库状态等
    // 处理完成后返回200状态码（默认就是200，这里可以明确指定）
    http_response_code(200);
    echo "操作成功";
    exit;
}
?>

额外注意事项 #

• 确保你的页面已经正确引入了jQuery和Font Awesome，否则加载动画和AJAX功能都无法正常工作。
• 如果不需要额外的业务逻辑，也可以直接在AJAX的success回调里直接修改按钮文本，不过保留PHP处理页面更便于后续扩展业务功能。

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