php - php页面刷新时Mysql可拖动位置重置
问题描述
我正在尝试将可拖动对象的 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
)
解决方案
您正在包括您的操作脚本。删除它。它在每次刷新时运行。您应该尝试考虑使用表单作为操作方法。
<?php include 'gemmerajax.php';?>
在您的 JQuery 中,您可以捕获 on submit。
推荐阅读
- sql - count(distinct) over (partition by... doesn't work in Oracle SQL
- python - 如何获取在我获取或发布请求到端点后发送的请求标头
- sql-server - Is a nullable foreign key workable?
- ios - Apple sandbox tester "this field is invalid" for password
- r - 无法在 Windows 10 上制作集群
- java - 从 List 中检索项目会导致 com.sun.jdi.InvocationException 错误
- python-3.x - Psycopg2 Python3将多个变量作为列表插入
- javascript - 我正在制作一个代码编辑器应用程序,可让您执行 HTML/CSS/JS 代码,但 JavaScript 只执行一次
- python - 将一些 np 数组作为新列添加到我的数据中
- google-chrome - 如何解决 Chrome 73 上 SVG 旋转 CSS 中的错误?