PHP Ajax从表中删除记录

时间:2018-01-11 10:20:38

标签: javascript php jquery ajax

发生了一些奇怪的问题。我试图通过使用AJAX从表中删除记录,但每当我单击删除按钮时,它每次都会发送表中最后一行的ID,而不是我想要删除到{{1}的特定ID }页面。现在我检查了PHP页面和代码是否正常工作。当我delete-process.php时,我看到无论我点击哪个删除按钮,我都会得到最后一个字段的ID。

代码

console.log(dataString)

AJAX

<table class="table table-hover table-striped">
              <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Date</th>
                <th>Action</th>
              </thead>
              <tbody>
                <?php while($si = $stmt->fetch()){ extract($si); ?>
                <tr>
                  <td><?php echo $ct_id; ?></td>
                  <td><?php echo $ct_name; ?></td>
                  <td><?php echo $ct_email; ?></td>
                  <td><?php echo $ct_phone; ?></td>
                  <td><?php echo date('jS M, Y (h:i a)', strtotime($ct_date)); ?></td>
                  <td>
                    <form method="post" action="">
                      <a href="view-msg.php?id=<?php echo $ct_id; if(!empty($_GET['ids'])){ ?>&ids=<?php echo $_GET['ids']; } ?>" class="btn btn-info btn-fill">View</a>
                      <input type="text" value="<?php echo $ct_id; ?>" class="ctid">
                      <input type="submit" value="Delete" class="btn btn-danger btn-fill delete">
                    </form>
                  </td>
                </tr>
                <?php } ?>
              </tbody>

我没有包含PHP代码,因为在$(document).ready(function() { $(".delete").click(function() { var dataString = { id: $(".ctid").val() }; console.log(dataString); var $submit = $(this).parent().find('.delete'); $.confirm({ title: 'Confirm!', content: 'Are you sure you want to delete this message?', buttons: { confirm: function () { $.ajax({ type: "POST", //dataType : "json", url: "delete-process.php", data: dataString, cache: true, beforeSend: function(){ $submit.val("Please wait..."); }, success: function(html){ $('.message').html(html); if($('.message').find('#responseBox').hasClass('alert-success')){ $.alert(html); setTimeout(function(){ window.location.replace("support.php<?php if(!empty($_GET['ids'])){ ?>?ids=<?php echo $_GET['ids']; } ?>"); },2000); } } }); }, cancel: function(){} } }); return false; }); }); 中检测到错误,因为每个点击的按钮都发送相同的ID。请帮忙。

5 个答案:

答案 0 :(得分:2)

$(".ctid")将返回一个包含该类的所有元素的数组。

您只对所点击的按钮的兄弟感兴趣,因此您应该使用$(this).prev()

$(this)将引用点击的按钮。 .prev()选择即将进行的兄弟姐妹。

$(".delete").click(function() {
    var dataString = {
      id: $(this).prev().val()
    };
    ...
});

答案 1 :(得分:1)

当然它选择相同的ctid,因为你不区分表格。你可以这样区分:

var dataString = {
      id: $(this).closest('form').find('.ctid').val()
    };

&#34;最接近&#34;导航到表单,然后找到表单中包含的ctid。

答案 2 :(得分:1)

执行此操作时:

$(".ctid").val()

您期待哪种匹配元素?代码没有指定,".ctid"匹配多个元素。但由于它只能返回一个值,它只是返回最后一个匹配的值。基本上,您需要指定所需的匹配元素。

执行此操作的一种方法是将DOM从单击的按钮导航到最近的匹配元素。也许通过导航到单个公共父元素然后在其中找到目标元素。像这样:

$(this).closest("form").find(".ctid").val()

从引发事件的点击元素(this)开始,它会导航到包含<form>的内容,然后在该表单中搜索匹配的".ctid"。然后只从该元素中获取值。

答案 3 :(得分:1)

在使用循环创建表行时,将重复类ctid。所以当你像id: $(".ctid").val()那样访问它时。它将返回具有类ctid的所有元素。所以像这样改变你的脚本

var dataString = {
  id: $(this).siblings('.ctid').val()
};

答案 4 :(得分:-1)

您可以检查以检查每个按钮值是否唯一 你可以在不使用代码

下面的ajax的情况下实现这一点
<a href="delete-process.php?id=value of id" onclick="return confirm('Are you sure you want to delete ?')"> Delete </a>