服务器端表使用JS，Php或Ajax从表（而不是数据库）中删除行 [英] Server-side table deletes row from tables (but not database) using JS, Php, or Ajax

问题描述

项目链接： https://databasetable-net.000webhostapp.com/

以下代码正确删除了表中的行：

This following code correctly deletes a row in a table:

  $('#example').on('click', '.delete_btn', function () {
      var row = $(this).closest('tr');
      var data = table.row( row ).data().delete;
      console.log(data);
      alert("delete_btn clicked");
      row.remove();
    });

但是，它不会永久删除该行。如果刷新页面，则被删除的行仍然存在。我相信这是因为我没有从数据库中删除该行。通常在php中，您可以使用以下类似的方法安全地删除数据库中的行：

However, it is not permately deleting the row. If you refresh the page, the row that got 'deleted' still exists. I believe this is because I am not deleting the row out of the database. Normally in php you safely remove a row in a database with something like this:

id = mysqli_real_escape_string($con, $_GET['del']);
$stmt = $con->prepare("DELETE FROM employees WHERE id = ? LIMIT 1"); 
$stmt->bind_param('i', $id);
$stmt->execute(); 
$stmt->close();
header('location: index.php');

编辑：修改的代码Index.php：

  (document).ready(function() {
var asc = true;
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server.php",
"type": "POST",
},

//http://live.datatables.net/xijecupo/1/edit
columnDefs: [{
targets: -1,
defaultContent: '<button type="button" class="delete_btn">Delete</button>'
}],
rowGroup: {
dataSrc: 1
}
});

$(function(){
    $(document).on('click','.delete_btn',function(){

        var del_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
        console.log(del_id);

        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: { 'del_id' : del_id}, 

            success: function(data){ //data is an json encoded array.

              console.log('Data: ' + data); //Going to display whats in data so you can see whats going on.

              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
                alert("delete btn clicked");
                ele.remove();
              }else{
                console.log('The row was not deleted.');
                }

             }

            });
        });
}); //http://jsfiddle.net/zfohLL0a/

}); //end doc ready

delete.php代码：

$del_id = $_POST['del_id']; 
$stmt = $conn->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();

$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
  $array['success'] = TRUE;
}

echo json_encode($array);
?>

部分解决方案： 示例格式如何设置Ajax。 首先，必须使用datatables.net ajax：原始server.php的方法。但是之后，您对add.php，delete.php等使用常规的$ .ajax方法。这令人困惑，因为您对ajax使用了两种不同的语法。最简单的方法就是查看示例链接。 具有相同代码的YouTube视频

Partial Solution: Sample format how to setup the ajax. You have to start off by using the datatables.net "ajax": method for the original server.php. But then after that you use the normal $.ajax methods for the add.php, delete.php, etc. It is confusing because you use two different syntax for ajax. Easiest to just look at the sample link. Youtube video for same code

另一个有用的链接，讨论了向ajax / json发送信息和从ajax / json发送信息，这是一个 两个 三个 四个

Another helpful link that discusses sending info to and from the ajax/json are one two three Four

推荐答案

使用最新的更新代码来更新答案。

JS

$(function(){
    $(document).on('click','.delete_btn',function(){

        var del_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
        console.log(del_id);

        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: {  //Set up your post data as an array of key value pairs.

              'del_id' : del_id

            }, 

            success: function(data){ //data is an json encoded array.

              console.log('Data: ' + data); //Going to display whats in data so you can see whats going on.

              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
                ele.fadeOut().remove();
              }else{
                console.log('The row was not deleted.');
                }

             }

            });
        });
});

delete.php

$del_id = $_POST['del_id']; 
$stmt = $con->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();

$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
  $array['success'] = TRUE;
}

echo json_encode($array); //Your ajax is setup to expect a json response.  
//json_encode the $array and echo it out.  You have to do this.  
//When you "echo" out a value, that is what the server is going to submit back to the ajax function.
//If you do not do this, the ajax script will not recieve a response from the delete.php page.

此代码应该对您有用。

这篇关于服务器端表使用JS，Php或Ajax从表（而不是数据库）中删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！