Question

我对我正在进行的项目提出了挑战，并且尽我所能让它无法正常工作。任何帮助将不胜感激。我构建了一个HTML / Bootstrap表单，其字段值通过ajax函数发送到mysql数据库，并在页面上显示更新的数据库而不刷新页面，该部分工作正常。每行都有一个删除按钮。但是，当我删除任何显示的行时，只有我单击的第一行被删除，并且显示更新的数据库。删除任何其他行的后续尝试不起作用，直到重新加载页面并重复该过程，然后只有第一个删除操作再次起作用。我的挑战是让删除按钮删除一行，立即获取并显示更新的数据库而无需刷新页面。这是我的ajax电话：

var pry= $("#pry").val();
var sec  = $("#sec").val();
var coll = $("#coll ").val();
var urlId = window.location.search.substring(1);    
var pageId = urlId.split('=')[1];

//Insert into DB
$.ajax({
url: "process.php",
type: "POST",
async: false,
data:
  {
   "done": 1,   
   "pry": pry,  
   "sec": sec,                                      
   "coll": coll,
   "page_id": pageId
   },                                           
    success: function(){
         displayFromDb();   
         clearInputs();
    }
});

//delete from db
$(".my_butn").on("click", function(e){
    e.preventDefault();
    var id = $(this).attr("id");

$.ajax({
    type: "POST",
    url: "delete.php",
    async: false,
    data:
       {                                         
        "pry": pry, 
        "sec": sec,                                     
        "coll": coll,
        "page_id": pageId,
        “id”: id
       },
         success: function(){
           displayFromDb();
         }
      });
    });

//function displayFromDb
     function displayFromDb(){
       $.ajax({
          type: "POST",
          url: "process.php",
          async: false,
          data:
             {                                                                                                                                                        
              "display": 1,                                             
              "page_id": pageId
             },
          success: function(d){                                                                                                              
                $("#tab-display").fadeIn().html(d);
          }
       });
    }

//process.php file
<?php
//Insert to  sql    
  if (isset($_POST["done"])){
    $conn = mysqli_connect('localhost', 'root', '', 'educ');
    $student_id = mysqli_real_escape_string($conn, $_POST['page_id']);
    $pry = mysqli_real_escape_string($conn, $_POST["pry"]);
    $sec = mysqli_real_escape_string($conn, $_POST["sec"]);
    $coll = mysqli_real_escape_string($conn, $_POST["coll"]);

    $sql = mysqli_query($conn, "INSERT INTO students (id, student _id, pry, sec, coll) VALUES (' ', '$student_id ', '$pry', '$sec', '$coll')");
}

//display from sql  
if (isset($_POST['display'])){
    $i=1;
    $sql2 = mysqli_query($conn, "SELECT id, pry, sec, coll FROM students WHERE student_id = '$student_id");
    if ($sql2){
        echo '<table class="table table-striped table-bordered"><thead><tr><th>S/N</th><th>ID</th><th>PRY EDUC</th><th>SEC EDUC</th><th>COLL EDUC</th><th>DEL ROW</th></tr></thead>';

    while ($row = mysqli_fetch_array($sql2, MYSQLI_ASSOC)){
        $id = $row['id'];
        $pry = $row['pry']; 
        $sec = $row['sec'];
        $coll = $row['coll'];
$del = "<button type='button' class='btn btn-danger' id='$id'> X</button>";
echo '<tbody><tr><td>'.$i.'</td><td>'.$id.'</td><td>'.$pry.'</td><td>'.$sec.'</td><td>'.$coll.'</td><td>'.$del.'</td></tr></tbody>';
        $i++;
        }
        echo '</table>';
        }
    }?>

我的delete.php文件在这里

  <?php
        $conn = mysqli_connect('localhost', 'root', '', 'educ');
        $student_id = mysqli_real_escape_string($conn, $_POST['page_id']);
        $pry = mysqli_real_escape_string($conn, $_POST["pry"]);
        $sec = mysqli_real_escape_string($conn, $_POST["sec"]);
        $coll = mysqli_real_escape_string($conn, $_POST["coll"]);
        $id =  $_POST["id"];

        $sql = mysqli_query($conn, "DELETE FROM students WHERE id = '$id' ");
    }
?>

Answer 1

一种简单的方法......

改变1：
在delete.php中，您可以在执行DELETE查询后添加以下代码：

echo mysqli_affected_rows($conn); 
die;

这意味着AJAX调用将接收任何echo ed值。现在，如果没有删除行，mysqli_affected_rows()将返回0;如果有错误，则返回-1，可以在success的{{1}}部分中检查以将相应的消息转发给用户

检查已删除的行数是否为＆gt; 0，然后可以安全地移除对应于该按钮的$.ajax()。请检查以下代码段，这可能对实现此目的有所帮助。您只需将此代码包装在<tr>

中

更改2：

success : function(delete_count){ .... }

$(".my-del-btn").on("click", function(){
  // AJAX call, success: function(delete_count)
  //if(delete_count > 0){
      $(this).parents().closest("tr").fadeOut(1000)
      .promise().done(function(){
          $(this).parents().closest("tr").remove();
      });
  //}
  //else{
  //    console.log("Error in deleting id = " + id);
  //}

});

一些重要的注意事项：

由于上述评论中链接的帖子表明，<head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-bordered"> <thead> <tr> <th>ID</th> <th>DEL ROW</th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> <button type='button' class='btn btn-danger my-del-btn'>DELETE</button> </td> </tr> <tr> <td> 2 </td> <td> <button type='button' class='btn btn-danger my-del-btn'>DELETE</button> </td> </tr> <tr> <td> 3 </td> <td> <button type='button' class='btn btn-danger my-del-btn'>DELETE</button> </td> </tr> </table> </body>在某种程度上对应用程序有害（除了在jQuery 1.8之后被弃用）。
请查看并考虑实施MySQLi Prepared Statements以保护您的PHP代码SQL Injection Attacks。

如何在不使用ajax刷新的情况下删除行并显示更新的数据库

1 个答案: