2

我正在将 ajax 添加到我制作的这个小列表 Web 应用程序中。

我有一个 php 脚本为列表中的每个项目输出的按钮。当单击其中一项的删除按钮时，我想调用 ajax 以使用 php 和 mysql 删除一项。

下面是项目 62 的删除按钮。它有一个隐藏字段，其中包含数据库中列表项的 id。单击按钮时，我希望调用一个 jquery 单击事件，该事件应发送一个 ajax 请求以从数据库中删除具有该 ID 的项目。

<form class="actions" action="index.php" method="POST">
<input type="hidden" name="idDel" id="62" value="62">
<input type="submit" class="button delete" value="X">
</form>

到目前为止我想到的jquery如下。当单击 .delete 类的按钮（任何删除按钮）时，它需要以某种方式从隐藏字段中获取 id 值。

('.delete').click(function(){
              //add click logic here

              var id = $("input.delete").val();

    return false;

    $.ajax({
      type: "POST",
      url: "delete.php",
      data: id,
      success: function() {

现在，我查看了两个类似的问题并尝试了他们的解决方案，但我无法从中找出代码。

  1. JQuery - 提交了哪个表单？
  2. 如何从表单提交事件中获取导致提交的按钮？

谢谢。

4

1 回答 1

3

用于$(this)引用被单击的按钮，然后用于.prev()获取按钮之前的元素，这是您在这种情况下想要的输入：

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).prev('input').val();

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});

您还可以将 ID 存储在data-按钮本身的属性中，这意味着更少的 HTML（但您将失去表单的非 JS POST 能力）：

HTML：

<form class="actions" action="index.php" method="POST">
   <input type="submit" class="button delete" value="X" data-id="62">
</form>

jQuery：

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).data('id');

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});
于 2012-07-17T13:10:23.600 回答