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

I want to delete a row in my database according to the ID that the row is. Each row has a delete button and that button is placed by using a form in the php file for each row. I used an javascript function with ajax to display the table I wanted but now I have another function that I want to use to delete a row according to it's ID.

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

The problem I encountered was that every time I click the delete button my whole page just refreshes and the record is still there. Any help?

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

P.S. I'm new to php, ajax, and especially javascript and have not learned any jQuery so preferably help would be appreciated if codes were to be written in pure javascript as I want to learn the basics first.

附:我是php,ajax,尤其是javascript的新手,并没有学习任何jQuery,所以如果代码是用纯javascript编写的话,最好帮助我们,因为我想先学习基础知识。

This is the function in the javascript to delete the row using ajax xmlhttp object.

这是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);
 }
}

These are the codes in the php file to delete the row

这些是删除行的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";
}

This is the button inside a table to put a delete button for each row.

这是表中的按钮,用于为每行添加删除按钮。

<!--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>

2 个解决方案

#1

First, you have multiple issues with your HTML. I would suggest you indent your code consistently to help point out issues. Also, remember to close your tags. For example:

首先,您的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>

Also, if you this button next to every row on the page you shouldn't give it an id. ids need to be unique on a page (only one of each). Perhaps you should use a class instead?

另外,如果你在页面的每一行旁边都有这个按钮,你就不应该给它一个id。 id需要在页面上是唯一的(每个页面只有一个)。也许你应该使用一个班级?

Second: a submit type of input will literally submit its enclosing form and refresh the page. Thats its purpose. If you want to use AJAX, you don't want to actually do this.

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

What I would suggest is putting another function into your javascript and referencing this from the onclick of a <button> rather than an <input>. Then you can properly prevent submission of the page.

我建议将另一个函数添加到你的javascript中并通过

Eg:

<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>

And in your javascript:

并在您的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);
    }
}

#2

Try this:

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

It will avoid to submit form. Take a look: event.preventDefault() vs. return false

它将避免提交表格。看一下:event.preventDefault()与return false

Here is a snippet for you:

这是给你的一个片段:

<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>

#1