如何实现表单提交成功后清空输入数据，失败时保留数据？

我明白你的需求——提交成功清空表单，失败保留数据，现在成功时没生效对吧？问题出在你的JavaScript代码里没有根据PHP返回的结果状态来执行清空逻辑，而且当前的响应处理只是把内容插入页面，没做状态判断。

第一步：让PHP返回结构化的状态响应 #

首先你需要修改check-class.php，让它返回JSON格式的响应，明确告诉前端是成功还是失败。比如：

<?php
// 替换成你的数据库操作与判断逻辑
$isSuccess = false; 
$message = "";

if ($isSuccess) {
    $response = [
        "status" => "success",
        "message" => "Class registered successfully!"
    ];
} else {
    $response = [
        "status" => "error",
        "message" => "Class already exists, please try another one."
    ];
}

// 设置正确的响应头，确保前端能识别JSON格式
header('Content-Type: application/json');
echo json_encode($response);
?>

第二步：修改JavaScript逻辑，根据状态处理表单 #

接下来调整你的JS代码，解析PHP返回的JSON，根据status字段来决定是否清空表单：

$(document).ready(function() {
    $('#loading').hide();
    $('#registerClass').click(function(e){
        e.preventDefault(); // 用这个代替return false更规范
        $('#loading').show();
        
        // 先获取当前表单值
        const className = $('#inputClass').val();
        const section = $('#selectSection').val();

        $.post("check-class.php", { 
            inputClass: className, 
            selectSection: section 
        }, function(response){
            // 解析JSON响应（如果加了dataType:'json'可以省略这一步）
            const res = JSON.parse(response);
            $('#loading').hide();
            
            // 更新页面提示信息
            $('#resultInfo').html(res.message).fadeIn();
            
            // 根据状态处理表单
            if (res.status === "success") {
                // 清空输入框
                $('#inputClass').val('');
                // 重置下拉框到默认的禁用选项
                $('#selectSection').prop('selectedIndex', 0);
            }
            // 失败时什么都不做，自动保留原有输入内容
        });
    });
});

为什么原来的代码没生效？ #

你之前的finishAjax函数只是把响应内容插入页面，但没有区分成功和失败的情况，也没有编写清空表单的逻辑。现在通过JSON返回明确的状态标识，就能精准控制表单的行为了。

额外优化小技巧 #

如果使用jQuery的$.post，可以加上dataType: 'json'参数，这样jQuery会自动帮你解析JSON，不用手动写JSON.parse：

$.post("check-class.php", { 
    inputClass: className, 
    selectSection: section 
}, function(response){
    // 这里response已经是解析好的JSON对象
    $('#resultInfo').html(response.message).fadeIn();
    if (response.status === "success") {
        $('#inputClass').val('');
        $('#selectSection').prop('selectedIndex', 0);
    }
}, 'json');

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