Question

我正在创建一个简单的多聊天Web应用程序。在此系统运行良好之前，我已经创建了该系统，但后来由于此原因，我在源代码中做了一些更改当我输入输入内容时，同一数据将多次存储在数据库中，同时重复数据本身也会增加。请有人帮我解决这个问题

这是我的索引页

<?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>

Answer 1

您正面临这个问题，因为在不知情的情况下，您只是创建了递归函数，即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结束标记之前插入该脚本，以确保页面中的所有元素均已加载并可以访问。

Ps：您正在混合纯JavaScript和jQuery，这不是明智的选择选择，您应该只使用其中之一。

希望我进一步推动了你。

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

1 个答案: