Question

有一个表格可以显示项目，并且有一个＆＃34;删除＆＃34;每行按钮。删除按钮位于表单内。我使用AjaxForm方法提交表单。单击删除按钮应该删除数据而不会定向到任何页面或没有刷新当前页面。但是，正如在动作标签上定义的那样，表格会以常规方式提交。

我以下列方式在桌面上显示结果：

while($row = $result->fetch_assoc()) 
    {               
    ?>  


<tr>
  <td><?php echo  ++$x; ?></td>
  <td><?php echo $row["id"]; ?></td>
  <td><?php echo $row["title"]; ?></td>
  <td><?php echo $row["author"]; ?></td>
  <td>
  <form method="POST" id='deleteform' class="forms" action="deletebook.php">         
  <input type="hidden" name="deletebook" value='<?php echo $row["id"]; ?>' >
  <button type="submit" class="btn btn-danger btn-xs">Delete</button>
  </form>
  </td>
</tr> 


<?php
    }
}

else
{
    echo "No Books Found!";
}

这将显示以下way

中的表格

要通过AjaxForm提交表单，已完成如下操作:(我此处未显示<table>个标签。原谅我。）

<script>
            $(document).ready(function() { 
                $('#deleteform').ajaxForm(function() { 

                    alert("success");

                }); 
                event.preventDefault();
            }); 
    </script>

问题是表单是通过常规方式action="deletebook.php"提交的相信我通过AjaxForm提交表单的其他页面。但是在这个页面中，问题就出现了。

这可能会发生，因为每个＆＃34;删除＆＃34;按钮是根据表中的内容显示的表单。请帮帮我。

编辑：问题不在于无法删除数据。数据之前被删除，现在被删除。将我发送到deletebook.php页面即可删除数据。我希望删除数据而不将其发送到任何其他页面。

Answer 1

尝试这种方式：

while($row = $result->fetch_assoc()) 
    {               
    ?>  


<tr>
  <td><?php echo  ++$x; ?></td>
  <td><?php echo $row["id"]; ?></td>
  <td><?php echo $row["title"]; ?></td>
  <td><?php echo $row["author"]; ?></td>
  <td>
      <input type="hidden" class="hiddenId" value="<?php echo $row["id"]; ?>" />
  <button type="button" class="btn btn-danger btn-xs">Delete</button>
  </td>
</tr> 


<?php
    }
}

else
{
    echo "No Books Found!";
}

?>

<script>
    var id;

$(document).ready(function(){
    $(".btn-danger").click(function(){
        id = $(this).prev().val();
        $.ajax({
            url: "deletebook.php",
            type: 'post',
            data: {
                "deletebook": id
            }
        }).done(function(response){
            $(".hiddenId[value='" + id + "']").parent().parent().remove();
        });
    });
});
</script>

添加：

$('#addbook').ajaxForm(
{ 
    success: function(responseText, statusText, xhr, $form){
        $('#booksuccess').modal('show'); 
        $("#reset").click(); 
        $("tr").last().append(responseText);
    }
});

在你的php add方法中，返回一个这样的字符串：

"<tr><td></td><td>1</td><td>$Title</td><td>$Author</td><td><input type=\"hidden\" class=\"hiddenId\" value=\"$Id\" /><button type=\"button\" class=\"btn btn-danger btn-xs\">Delete</button></td></tr>";

Answer 2

我想你在这里使用ajaxForm插件http://malsup.com/jquery/form/#ajaxForm

    $(document).ready(function() { 
        $('#deleteform').ajaxForm(
           {
              beforeSubmit: function(formData, jqForm, options){
                   //show loader
              },
              success:function(responseText, statusText, xhr, $form) { 

                 alert(responseText);
                 //hide loader
              }
           }
        ); 

    });

表单未通过AjaxForm / JQuery提交

2 个答案: