无需刷新页面即可更新数据库

Question

每当点击带有 yes id 的超链接时，我不希望页面刷新然后显示状态，我希望状态在不刷新页面的情况下立即更改。 我知道 Ajax 会处理这个问题，但是谁能给我提供一个包含我的代码的工作示例？ 因为它融化了我的头：/

        <h3 class="page-header"> Enquiries </h3>

        <form id="enquiry" method="post"  action="enquiry_csv.php">
         <table class="table table-bordered table-hover">

            <thead>
                <tr>

                    <th> First Name</th>
                    <th> Last Name</th>
                    <th>Email</th>
                    <th>Message</th>
                    <th>Date</th>
                    <th>Responded to Enquiry?</th>

                    <th>Status</th>

                    <th></th>
                    <th><input class='btn-success' name='export' id='btnExport' type='submit' value='Export to CSV'/></th>

                </tr>
            </thead>

                  <tbody>


             <?php 

              $query = "SELECT * FROM enquiries";
             $select_enquiries = mysqli_query($connection,$query);  

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

             $Enquiry_ID = $row['Enquiry_ID'];
             $FirstName = $row['First_Name'];   
             $LastName =$row['Last_Name'];
             $Email = $row['Email'];
             $Message = $row['Message'];
             $Date  =$row['Date'];
             $Responded =$row['Responded'];

            echo "<tr>";

            echo "<td>$FirstName </td>";
            echo "<td>$LastName </td>";
            echo "<td>$Email </td>";
            echo "<td>$Message </td>";
           echo "<td>$Date </td>";
          echo "<td> <a id='yes' class='success' style='' href='enquiries.php?Yes=$Enquiry_ID'>Yes</a> | <a class='success' href='enquiries.php?No=$Enquiry_ID'>No</a> </td>";

         echo "<td> $Responded</td>";

        echo "<td> <a class='btn btn-danger' href ='enquiries.php?delete=$Enquiry_ID'>Delete</a> </td>";

            echo "</tr>"; 

             }

             ?>

              <?php

              if(isset($_GET['Yes'])){

          $enquiry_id = $_GET['Yes'];

         $query = "UPDATE enquiries SET Responded = 'Yes' WHERE Enquiry_ID =  {$Enquiry_ID}";
         $query = mysqli_query($connection, $query);

           }

           if(isset($_GET['No'])){

           $enquiry_id = $_GET['No'];

            $query = "UPDATE enquiries SET Responded = 'No' WHERE Enquiry_ID = {$Enquiry_ID}";
          $query = mysqli_query($connection, $query);


         }


           if(isset($_GET['delete'])){

          $review_id = $_GET['delete'];

          $query = "DELETE FROM enquiries WHERE Enquiry_ID = {$Enquiry_ID} ";
          $delete_query = mysqli_query($connection, $query);

             }


                      ?>

                   <tr> 

                   <td></td>
                   <td> </td>
                   <td> </td>
                    <td> </td>
                    <td> </td>

                   </tr>   

        </tbody>
        </table>



        </form>

Answer 1

您可以使用 jquery ajax api 执行异步 HTTP (Ajax) 请求

http://api.jquery.com/jquery.ajax/

Answer 2

请参阅@Sanya Zahid 发布的上述链接并尝试执行以下操作：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
   $(".submit").click(function() {
   var name = $("#name").val();
   var age = $("#age").val();
   var dataString = 'name='+ name +'&age='+ age;

   if(name=='' || age =='')
   {
      $('.success').fadeOut(200).hide();
      $('.error').fadeOut(200).show();
   }
   else
   {
      $.ajax({
      type: "POST",
      url: "submit.php",
      data: dataString,
      success: function(){
      $('.success').fadeIn(200).show();
      $('.error').fadeOut(200).hide();
   }
   });
   }
   return false;
   });
   });
   </script>

   <form method="post" name="form">
       <input id="name" name="name" type="text" /><br>
       <input id="age" name="age" type="text"/>
   <div>
      <input type="submit" value="Submit" class="submit"/>
      <span class="error" style="display:none"> Please Enter Data</span>
      <span class="success" style="display:none"> Data Saved!!</span>
  </div>
  </form>

这里submit.php包含数据库相关的东西（ insert/update/delete ）。 我只是在代码中添加了姓名和年龄文件。 根据您的表单添加字段。

提交.php :

<?php
$conn = mysqli_connect("localhost","root","","test");

/* Insert form data with out page refresh */

if($_POST)
{
    $name=$_POST['name'];
    $age = $_POST['age'];
    mysqli_query($conn,"Query will come here");
}else{
    echo "Please try again!!";
}
/* Insert form data with out page refresh */

?>