AJAX提交datetime-local输入时PHP始终获取旧值无法更新数据库

核心问题来自前后端两处逻辑缺陷：

• 前端datetime-local输入框的初始值格式不符合浏览器规范，导致JS无法正确读取用户修改后的新值，提交的Payload始终是初始加载的旧值
• 后端代码存在变量作用域、SQL注入风险，硬编码测试值不生效多为参数校验不通过、变量被意外覆盖导致

第一步：修复前端输入框值绑定 #

datetime-local输入框的value属性仅接受YYYY-MM-DDTHH:mm/YYYY-MM-DDTHH:mm:ss格式的字符串，从SQL数据库读取的时间默认是YYYY-MM-DD H:i:s格式（日期和时间中间为空格），直接传入会导致浏览器无法正确绑定值，用户修改后JS取值异常。
修复input代码：

<input 
  type="datetime-local" 
  onchange="updateDate(this, 'dateEnd', '<?php echo $id;?>')" 
  value="<?php echo date('Y-m-d\TH:i:s', strtotime($dateEnd)); ?>"
>

注意：格式中的T需要加反斜杠转义，避免PHP将其识别为时间格式占位符

第二步：修复前端AJAX提交逻辑 #

原AJAX逻辑缺少缓存控制、值校验，补充后代码如下：

function updateDate(element,column,id) {
    if (!element.value) {
        alert('请选择有效的日期时间');
        return;
    }
    var result = confirm("Are you sure you want to update value?");
    if (result) {
        var value = element.value;     
        $.ajax({
            url:'updateblotters.php',
            type: 'post',
            cache: false,
            data:{
                value: value,
                column: column,
                id: id
            },
            success: function(php_result) {
                console.log(php_result);
                element.defaultValue = value;
            },
            error: function(xhr, status, error) {
                console.log('请求错误:', error);
            }
        })
    }                   
}

调试方法：触发提交前先console.log(element.value)确认取到的是修改后的新值，再对照浏览器网络面板的Payload，确认前端传值正确。

第三步：修复后端PHP逻辑 #

原代码存在SQL注入风险、变量未定义隐患，修复后代码如下：

<?php
// 仅接受POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    exit('非法请求');
}

// 校验必填参数
if(!isset($_POST['id'], $_POST['column'], $_POST['value'])) {
    exit('缺少必要参数');
}

// 字段白名单校验，彻底避免SQL注入
$allowedColumns = ['dateEnd'];
$column = $_POST['column'];
if (!in_array($column, $allowedColumns)) {
    exit('非法更新字段');
}

$id = $_POST['id'];
// 测试阶段可放开下一行硬编码，验证数据库更新逻辑是否正常
// $value = date('Y-m-d H:i:s', strtotime('2020-10-09T11:11:11'));
// 正式逻辑：将前端传入的T格式时间转为数据库兼容的Y-m-d H:i:s格式
$value = date('Y-m-d H:i:s', strtotime($_POST['value']));

$sql = "UPDATE blotters SET $column = :value WHERE blotterId = :id LIMIT 1";
$stmt = $db->prepare($sql);
$stmt->bindParam(":value", $value);
$stmt->bindParam(":id", $id);

if($stmt->execute()){
    echo "更新成功，影响行数：".$stmt->rowCount();
} else {
    print_r($stmt->errorInfo());
}
?>

测试顺序：先放开硬编码逻辑，直接向后端发POST请求，确认数据库可以被更新为硬编码的时间，排除后端逻辑问题后，再测试前端传值流程。

额外排查点 #

• 打开浏览器开发者工具，勾选「禁用缓存」选项，避免加载旧版本的JS/HTML资源
• 检查页面是否存在多个同名/同ID的输入框，导致JS取值时拿到隐藏的旧值DOM
• 如果输入框嵌套在form标签内，在onchange逻辑末尾加return false;阻止表单默认提交，避免AJAX和默认表单提交冲突
• 确认数据库dateEnd字段为datetime类型，字段权限、默认值配置正常

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