按下Submit Form时，通过Jquery Ajax删除Post

Deleting Post Via Jquery Ajax when Submit Form is Pressed

本文关键字：Jquery Ajax 删除 Post 通过 Submit Form 按下      更新时间：2023-09-26

我有以下表格5-10：-

<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="9" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="8" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="7" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="6" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="5" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="4" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>

我在jquery下面执行ajax并删除那个特定的帖子，但它并没有执行删除。

<script type="text/javascript">
$(document).ready(function(){
    $("#post").submit(function() {
            var postid = $('#postid').val();
            var unique= $('#unique').val();
            var str = 'unique='+ unique+ '&postid='+ postid;
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: str,
                success: function(msg) {
                    $("#post").ajaxComplete(function(event, request, settings) {
                        if (msg == 'OK')
                        {
                            result = '<div style="color:red;">Something Went Wrong</div><br />';
                        } else {
                            result = msg;
                        }
                        $("#post").html(result);
                    });
                }
            });
            return false;
        });
});
</script>

我的PHP删除代码：-

<?php
if($_POST['unique'] === $_SESSION['unique']) {
    $delete = $mysqli->query("DELETE from post where postid='".$mysqli->real_escape_string($_POST['postid'])."'");
    echo "DELETED";
} else {
    echo "OK";
}
?>

按下提交功能时并不是在删除帖子。。。每当用户提交任何特定表单时，我都想删除那个特定的帖子…

您需要将父div更改为类名为"post"，而不是所有div都具有相同的id。然后，您可以绑定所有具有类"post"的项来提交函数，并在函数中找到每个表单作为事件源，并找到子项来获取值。请在此处查看实时解决方案：http://jsfiddle.net/vendettamit/nn9FV/更新代码在这里：

$(document).ready(function(){
    $("div.post").submit(function(e){
        console.log(e);
        var currForm = e.delegateTarget.firstElementChild;
            var postid = $(currForm).children('#postid').val();
            var unique= $(currForm).children('#unique').val();
            var str = 'unique='+ unique+ '&postid='+ postid;
        console.log(str)
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: str,
                success: function(msg) {
                    $("#post").ajaxComplete(function(event, request, settings) {
                        if (msg == 'OK')
                        {
                            result = '<div style="color:red;">Something Went Wrong</div><br />';
                        } else {
                            result = msg;
                        }
                        $("#post").html(result);
                    });
                }
            });
            return false;
        });
});

并且您的更新HTML看起来像：

<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="9" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="8" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="7" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="6" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="5" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
<div class="post">
<form method="post" action="javascript:alert('success')" >
    <input id="postid" type="hidden" name="post" value="4" />
    <input id="unique" type="hidden" name="unique" value="<?php echo $unique; ?>" />
    <input type="submit" value="Submit" name="submit" />
</form>
</div>
相关文章：