Question

我想根据该行的ID删除数据库中的一行。每行都有一个删除按钮，该按钮通过在每个行的php文件中使用一个表单来放置。我使用带有ajax的javascript函数来显示我想要的表，但现在我有另一个函数，我想根据它的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";
}

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

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

Answer 1

首先，您的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，则不应该为其id。 id需要在页面上是唯一的（每个页面只有一个）。也许您应该使用class代替？

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

我建议将另一个功能添加到您的javascript中，并从onclick的{{1}}而不是<button>引用此功能。然后，您可以正确阻止提交页面。

例如：

<input>

在你的javascript中：

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

Answer 2

试试这个：

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

如何通过ajax

2 个答案: