向mysql数据库插入数据时出现问题

我正在创建一个简单的多聊天网络应用程序。我已经创建了这个系统之前，工作得很好，但后来我在源代码中做了一些更改，由于这一点，当我输入输入它将存储相同的数据多次在数据库中的同时，重复的数据是自己递增的。请任何人帮助我解决这个问题
这是我的索引页

<?php include 'db.php';?>
<!DOCTYPE html>
<html>
<head>  

<style>
   #wraper{
    height:550px;
    width:100%;
   }
   #stage{
    height:450px;
    width:100%;
    background-color:black;
    color:white;
    overflow:auto;

   }
   #pen
   {
    height:100px;
    width:100%;
    background-color:red;
   }

   </style>
  <title>forum</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  </head> 
<body>
  <div id="wraper">
    <div id="stage">message goes here</div>
    <div id="pen">

  <br>
  <form id="image_form" method="post" enctype="multipart/form-data">
     <input type="hidden" name="action" id="action" value="insert" />
     <input type="hidden" name="image_id" id="image_id" />
     <input type="hidden" name="user_id" id="user_id" value="<?php session_start(); echo $_SESSION['si']; ?>" />
     <input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="description" 
       id="description" 
       placeholder="say some thing"
       autocomplete="off" required />
       <input type="hidden" name="clock" id="clock" value="<?php echo date('Y-m-d H:i:s'); ?>" readonly="readonly" />
       <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-info" />
 </form>
 </div></div>
 </body>
 </html>
<script>  
$(document).ready(function display_msg(){
   var action = "fetch";
   $.ajax({
   url:"forum_action.php",
   method:"POST",
   data:{action:action},
   success:function(data)
   {
    $('#stage').html(data);
    var objDiv = document.getElementById("stage");
        objDiv.scrollTop = objDiv.scrollHeight;
  }
  });

$('#image_form').submit(function(event){
     event.preventDefault();
     $.ajax({
     url:"forum_action.php",
     method:"POST",
     data:new FormData(this),
     contentType:false,
     processData:false,
     success:function(data)
     {
      //alert(data);
      $('#image_form')[0].reset();
      display_msg();
     }
    })
   });
  });
</script>

这是我的行动页面

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  #container
    {
      height:70px;
      width:50%;
      color:white;

    }
    .usr_id
    {
      background-color:blue;
      height:20px;
      width:40%;
      position:relative;
      float:left;
      border-radius: 15px 0 0 0;
    }
    .msg
    {
    background-color:green;
    height:30px;
      width:100%; 
     position:relative;
      float:left;
      border-radius:0 0 15px 15px;  
    }
    .clock
    {
      background-color:purple;
      height:20px;
      width:60%;
      position:relative;
      float:left;
      border-radius:0 15px 0 0;
      text-align: right;
    }
  </style>
</head>
<body>
<?php
//action.php
if(isset($_POST["action"]))
{
 $connect = mysqli_connect("localhost", "root", "", "flash");

                                          //INSERTING MESSSA

 if($_POST["action"] == "insert")
 {
  $name=$_POST['user_id'];
  $des= $_POST['description'];
  $clock=$_POST['clock'];
  $query = "INSERT INTO forum(user_id,description,clock) VALUES ('$name','$des','$clock')";
  if(mysqli_query($connect, $query))
  {
   echo 'Data Inserted into Database';
  }

 }
                                      // FETCHING MESSAGES
  if($_POST["action"] == "fetch")
 {
  $query = "SELECT * FROM forum ORDER BY id";
  $result = mysqli_query($connect, $query);
  $output = '
   <div>
  ';
  while($row = mysqli_fetch_array($result))
  {
   $output .= '
   <div id="container">
<div class="usr_id">'.$row["user_id"].'</div>
<div class="clock">'.$row["clock"].'</div>
<div class="msg">'.$row["description"].'</div>
</div><br>
   ';
  }
  $output .= '</div>';
  echo $output;
 }

}
?>

</body>
</html>

你面对这个问题是因为，在你不知情的情况下，你刚刚创建了递归函数，这是 display_msg 功能。为了避免这种行为，应该将表单提交事件处理程序放在 document.ready 事件处理程序。

// implementation of the display_msg function
function display_msg(){
   var action = "fetch";
   $.ajax({
   url:"forum_action.php",
   method:"POST",
   data:{action:action},
   success:function(data)
   {
    $('#stage').html(data);
    var objDiv = document.getElementById("stage");
        objDiv.scrollTop = objDiv.scrollHeight;
  }
  }
// execute display_msg function when the document is loaded
$(document).ready(display_msg);

// attach submit event listener to #image_form
$('#image_form').submit(function(event){
     event.preventDefault();
     $.ajax({
     url:"forum_action.php",
     method:"POST",
     data:new FormData(this),
     contentType:false,
     processData:false,
     success:function(data)
     {
      //alert(data);
      $('#image_form')[0].reset();
      display_msg();
     }
    })
   });

现在它不应该再一次又一次地插入相同的数据，而应该在 body 关闭标记以确保页面中的所有元素都已加载并可访问。
附言：你在混合纯正的 JavaScript 以及 jQuery 这不是一个明智的选择，你要么只用其中一个。
希望我把你推得更远。

向mysql数据库插入数据时出现问题

1条答案

相关问题

热门标签

最新问答