Question

我正在使用多个引导按钮，每个按钮使用jquery ajax从数据库中删除特定项目。这是一些HTML示例。

 <form name = "reply" id="replyForm" ><tr>
        <td><a href="projectdetails.php?id=vofQxri7mZvW1nsdpUZuaQDMIws82OOX">Demo</a></td>
        <td>Internal Projects <input type="hidden" name="id" value="vofQxri7mZvW1nsdpUZuaQDMIws82OOX"></td>
        <td><button id = "newThread" class="btn btn-primary" type="submit">Delete</button></td></form>
        </tr>
 <form name = "reply" id="replyForm" ><tr>
        <td><a href="projectdetails.php?id=lYQPeqRzrwjjOpd7dgsLMf5IP2vBqZKV">Demo1 Project</a></td>
        <td>Demo Client <input type="hidden" name="id" value="lYQPeqRzrwjjOpd7dgsLMf5IP2vBqZKV"></td>
        <td><button id = "newThread" class="btn btn-primary" type="submit">Delete</button></td></form>

我使用以下Javascript将信息发送到服务器

  $('.btn').on('click', function(e){
        e.preventDefault(); // prevent the default click action

        var $form = $('#replyForm');

        $.ajax({
            url: 'delproject.php',
            type: 'Post',
            data: $form.serialize(),
            success: function (data, textStatus, request) {
                alert(data);
                // ajax success callback
            },
            error: function (response) {
                alert('ajax failed');
                // ajax error callback
            },
        });
    });

没有数据发送到服务器。我认为这是因为Ajax没有采用这种形式。如何确保将正确的数据发送到服务器？

由于

Answer 1

看起来您只需要抓取按钮所属的特定表单即可。目前，您的$form变量正在抓取您不想要的页面上的两个表单。

所以改变这个：

var $form = $('#replyForm');

对此：

var $form = $(this).parent('form');

现在当你点击一个按钮时，它只抓取它所属的一个表格，然后将其序列化并发送。

这是一个演示：https://jsbin.com/wesutajebe/1/edit?html,js,output。单击“删除”按钮，您将看到正在序列化的正确表单数据。

附注：拥有相同ID的多个表单（或任何元素）通常不是一个好主意。

实际上，如果您只将这一个id变量发送到服务器，那么表单通常有点矫枉过正。这是一种您可能会觉得更简单的不同方法：

https://jsbin.com/vurajogaye/1/edit?html,js,output

我删除了所有表单标记甚至是隐藏的输入。按钮本身具有您需要的ID。 javascript处理程序使用更简单的jQuery post方法。

使用带有jquery Ajax的多个引导按钮

1 个答案: