php页面刷新时Mysql可拖动位置重置
Posted
技术标签:
【中文标题】php页面刷新时Mysql可拖动位置重置【英文标题】：Mysql draggable position resetting on php page refresh 【发布时间】：2021-10-04 01:30:29 【问题描述】：我正在尝试将可拖动对象的 jquery 偏移量保存并检索到 mysql。我没有将偏移量保存到 mysql 的问题，我也可以检索偏移量。但是，当我刷新我的 php 页面时，我的 mysql 中的偏移数据被重置为零。 我不明白为什么会这样，因为我将 ajax 设置为仅在按下保存按钮时发送数据。
主要的php部分
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Ajax draggable attempt</title>
<!-- PHP GET -->
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql2 = "SELECT id, xposition, yposition FROM Divsql";
$result2 = $conn->query($sql2);
// output data
while($row = $result2->fetch_assoc())
$xaksenny = $row["xposition"];
$yaksenny = $row["yposition"];
$conn->close();
?>
<style>
#draggable
width: 50px;
height: 50px;
padding: 0.5em;
border: solid;
top: <?php echo $yaksenny; ?>;
left: <?php echo $xaksenny; ?>;
</style>
</head>
<body>
<!-- Draggable object -->
<div id="draggable">
<p>Drag me</p>
</div>
<button id="gempositionen">Save position</button>
<script src="ajaxsetup.js"></script>
<!-- PHP FOR SAVING -->
<?php include 'gemmerajax.php';?>
</body>
</html>
发布 PHP
<!-- PHP FOR SAVING -->
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$xaksen = $_POST['x'];
$yaksen = $_POST['y'];
$sql = "UPDATE Divsql SET xposition='$xaksen', yposition='$yaksen'";
if ($conn->query($sql) === TRUE)
else
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close();
?>
查询部分
// Save function
$(document).ready(function()
$("#gempositionen").click(function()
var x = $("#draggable").offset().left;
var y = $("#draggable").offset().top;
//Ajax call
$.ajax(
type: "POST",
url: "gemmerajax.php",
data: x:x, y:y
).done(function( msg )
alert("Top: " + x + " Left: " + y);
);
);
);
// Draggable set-up
$( document ).ready(function()
$(function()
$( "#draggable" ).draggable(
stop: function(event)
);
);
);
SQL部分
CREATE TABLE Divsql (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
xposition INT(255) NOT NULL,
yposition INT(255) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
【问题讨论】：
【参考方案1】：您正在包含您的操作脚本。删除它。它在每次刷新时运行。您应该尝试考虑使用表单作为操作方法。
<?php include 'gemmerajax.php';?>
在您的 JQuery 中，您可以捕获 on submit。
【讨论】：
以上是关于php页面刷新时Mysql可拖动位置重置的主要内容，如果未能解决你的问题，请参考以下文章