如何通过 ajax 删除数据库中的行

How to delete row in database through ajax

我想根据该行的 ID 删除数据库中的一行。每行都有一个删除按钮,该按钮是通过在 php 文件中为每一行使用一个表单来放置的。我使用 javascript 函数和 ajax 来显示我想要的 table 但现在我有另一个函数,我想使用它来根据它的 ID 删除行。

我遇到的问题是,每次我点击删除按钮时,我的整个页面都会刷新,但记录仍然存在。有帮助吗?

P.S。我是 php、ajax,尤其是 javascript 的新手,还没有学到任何东西 jQuery,所以如果要用纯 javascript因为我想先学习基础知识。

这是 javascript 中使用 ajax xmlhttp 对象删除行的函数。

function deleteThis(){
 var del = document.getElementById("delete");
 var delRow = document.getElementById("deleteRow");
 var page = "database.php";
 var parameters = 'delete='+del+'&deleteRow='+delRow;
 var xmlhttp = new XMLHttpRequest();
 if(confirm('Are you sure you want to delete this?')==true){
 xmlhttp.onreadystatechange=function(){
 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  //What should be in here?
  }
 }
  xmlhttp.open("POST", page, true);
  xmlhttp.send(parameters);
 }
}

这些是 php 文件中删除行的代码

// Delete Row
if(isset($_POST['delete'])){//java script function somewhere
 $id = $_POST['deleteRow'];
 $query_string = "delete from $table_info where user_id='$id'";
 $result = @mysql_query($query_string);
 echo "row deleted";
}else {
 echo "Cannot delete row";
}

这是 table 中的按钮,用于为每一行放置一个删除按钮。

<!--Delete button-->
<td><form id="delete" method="post" action="">
<input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
<input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis()"<td></form></tr>

试试这个:

<input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis(); return false"><td></form></tr>

它将避免提交表单。看一看:event.preventDefault() vs. return false

这是给你的一个片段:

<script>
  function deleteThis() {
    "use strict";
    var sure = confirm('Are you sure you want to delete this?');
    if (!sure) {
      return;
    }

    var del = document.getElementById("delete");
    var delRow = document.getElementById("deleteRow");
    var page = "database.php";
    var parameters = 'delete=' + del + '&deleteRow=' + delRow;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(data) {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert("Form sent successfully");
      }
    }
    xmlhttp.open("POST", page, true);
    xmlhttp.send(parameters);
  }
</script>

<form id="delete" method="post" action="?">

  <input type="hidden" name="deleteRow" value="<?php echo $row['user_id']; ?>" />
  <input type="submit" name="delete" value="Delete" id="delete" onclick="deleteThis(); return false;">

</form>

首先,您的 HTML 有多个问题。我建议您始终如一地缩进代码以帮助指出问题。另外,请记住关闭您的标签。例如:

<td>
    <form id="delete" method="post" action="">
        <input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
        <input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis()">
    </form>
</td>

此外,如果您将 button 放在页面每一行的旁边,则不应给它一个 idids 在页面上必须是唯一的(每个只有一个)。也许您应该改用 class

第二:submit 类型的输入将逐字提交其封闭表单并刷新页面。这就是它的目的。如果您想使用 AJAX,您实际上并不想这样做。

我的建议是将另一个函数放入您的 javascript 中,并从 <button>onclick 而不是 <input> 中引用它。那么就可以适当的阻止页面的提交了。

例如:

<td>
    <form id="delete" method="post" action="">
        <input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
        <button name="delete" class="delete" onclick="javascript:handleDeleteClick(event, <?php echo $row['user_id']; ?>);">Delete</button>
    </form>
</td>

在你的 javascript 中:

function handleDeleteClick(e, userId) {
    e.preventDefault(); // Prevent default behaviour of this event (eg: submitting the form

    // Perform the AJAX request to delete this user
    var delRow = document.getElementById("deleteRow");
    var page = "database.php";
    var parameters = 'delete=true&deleteRow='+delRow;
    var xmlhttp = new XMLHttpRequest();

    if (confirm('Are you sure you want to delete this?') == true) {
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                // Request completed
            }
        }

        xmlhttp.open("POST", page, true);
        xmlhttp.send(parameters);
    }
}