无需刷新页面即可将数据发送到数据库

时间:2014-05-22 15:10:22

标签: php jquery mysql database

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

这是我的代码:

  // 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被提交到数据库中)。

但是当我使用代码的第二部分(阻止页面刷新)时,它总是向数据库发送一个5的ID(这是我的产品表中的第一个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));
 }
  ?>

1 个答案:

答案 0 :(得分:1)

js代码就像

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

注意: 您必须将表单ID更改为class。