将数据发送到数据库而不刷新页面

Question

我正在尝试将数据发送到我的数据库而不刷新页面。

这是我的代码：

  // Submit code to the database 

  $(document).on("click", "#pin", function(){
  $.post( $("#myForm").attr("action"), $("#myForm").serialize(), function(info){                  
  $("#result").html(info);});
  });


  // Prevent the form to refresh the page.

  $('form#myForm').submit(function(event){    
  event.preventDefault();
 }); 

现在，当我尝试将某些内容上传到我的数据库并且不使用代码的第二部分时，一切正常（正确的 ID 被提交到我的数据库，例如：ID 47 被提交到数据库）。

但是当我使用代码的第二部分（防止页面刷新）时，它总是向数据库发送 ID 5（即我的产品表中的第一个 ID）。

所以当我阻止页面刷新错误的 ID（例如：第一个 ID）被发送到数据库并且我不知道为什么时，一切都很好。

编辑：

这是 HTML 表单。这是一个php生成的

  <?php 
  include 'connection.php';

  $result = mysqli_query($con,"SELECT * FROM produitsinfo");
  $categorie = 'Pour-Lui';


    //Get all the data from database

  if ($result = mysqli_query($con,"SELECT * FROM produitsinfo WHERE categorie = '$categorie' OR                     
     categorie2 = '$categorie' OR categorie3 = '$categorie' OR categorie4 = '$categorie' OR 
            categorie5 = '      $categorie'")){

      // This is how each individual item get outputted to my page.

         while ($row = mysqli_fetch_assoc ($result)){


      // Get product-data from database(dont mind this)

      echo '<div class="panel panel-default" id="item">
               <div class="panel-body" id="bodyitem">
<div><a href="' . $row['amazonlink'] . '"><img src="pictures/' . $row['picture'] . '" alt="' .   
          $row['description'] .'"></a></div>
                <div class="caption">
                  <h3 class="prix">Prix: ' . $row['prix'] . ' €</h3>
                  <p class="stars"><b>' . $row['rating'] .' Stars</b></p>
                      <a href="' . $row['amazonlink'] . '">
                       <div><p id="description">' .row['description'] .'<p></div></a>




          // Form to send data to database

             <form id="myForm" action="insert/insertip.php" method="post">
                <div id="span"><?php echo $row["description"] ?></div>
                <input type="text" id="ideee" name="idee" value="' . $lol . '">
                <input type="submit" value="Pin It" id="pin">
             </form>
           </div>
        </div>
    </div>';
            }
 }
  else
 {
      echo (mysqli_error($con));
 }
  ?>

Answer 1

js 代码会是这样的

$('form.myForm').submit(function(event){    
  event.preventDefault();
  $.post( $(this).attr("action"), $(this).serialize(), function(info){                  
    $("#result").html(info);
  });
}); 

注意： 您必须将表单 id 更改为 class。