PHP页面刷新时Mysql存储的jQuery可拖拽元素位置清零问题求解

刷新页面时数据自动归零的核心原因是：主PHP页面末尾直接引入了存储逻辑文件gemmerajax.php，每次刷新主页面时该文件都会直接执行，此时还没有触发Ajax提交，不存在POST参数x和y，PHP读取$_POST['x']/$_POST['y']得到空值，写入INT类型的数据库字段时会自动转为0。

• 第一步：删除主PHP页面末尾的<?php include 'gemmerajax.php';?>代码，该文件是给Ajax接口单独调用的，不需要嵌入主页面加载。
• 第二步：给gemmerajax.php增加POST参数存在性校验，避免无参数时误执行更新逻辑，同时增加基础的参数过滤和SQL条件限制，修改后的代码如下：

<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}
// 仅当接收到Ajax发送的POST参数时才执行更新
if (isset($_POST['x']) && isset($_POST['y'])) {
    // 转成整数避免SQL注入风险
    $xaksen = intval($_POST['x']);
    $yaksen = intval($_POST['y']);
    // 增加WHERE条件避免全表更新，建议固定操作id=1的记录即可
    $sql = "UPDATE Divsql SET xposition='$xaksen', yposition='$yaksen' WHERE id=1";
    if ($conn->query($sql) === TRUE) {} else {
      echo "错误: " . $sql . "<br>" . $conn->error;
    }
}
$conn->close();
?>

• 第三步：补充拖拽元素的CSS定位规则，否则top和left属性不生效，修改后的样式代码如下：

#draggable { 
    width: 50px; 
    height: 50px; 
    padding: 0.5em; 
    border: solid;
    position: absolute; /* 新增定位规则，也可根据需求用relative */
    top: <?php echo $yaksenny; ?>px; /* 补充单位px避免浏览器兼容问题 */
    left: <?php echo $xaksenny; ?>px;
}

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