php页面刷新时Mysql可拖动位置重置

Question

I am trying save and retrieve the jquery offset of a draggable object to mysql.我正在尝试将可拖动对象的 jquery 偏移量保存并检索到 mysql。 I'm having no issue with saving the offset to mysql and I am able to retrieve the offset as well.我没有将偏移量保存到 mysql 的问题，我也可以检索偏移量。 However, when I refresh my php page, the offset data in my mysql is reset to zero.然而，当我刷新我的 php 页面时，我的 mysql 中的偏移数据被重置为零。 I don't understand why this is happening, since I've set my ajax to only send the data when pushing a save button.我不明白为什么会发生这种情况，因为我已将 ajax 设置为仅在按下保存按钮时发送数据。

Main php part主要 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>

POST PHP发布 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();

?>

JQUERY PART查询部分

   // 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 part 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
)

Answer 1

You're including your action script.你包括你的动作脚本。 Remove that.去掉那个。 It is running on every refresh.它在每次刷新时运行。 You should try looking into using a form with that as an action method.您应该尝试研究使用表单作为操作方法。

<?php include 'gemmerajax.php';?>

In you your JQuery you can catch the on submit.在您的 JQuery 中，您可以捕获提交。

php页面刷新时Mysql可拖动位置重置

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-28 10:04:19

php页面刷新时Mysql可拖动位置重置

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-28 10:04:19

解决方案1
0 已采纳 2021-07-28 10:04:19