Question

在我提出这个问题之前，我已经提到了this question的例子。但是，它似乎不起作用。不使用ajax，我可以删除我的帖子但是在实现ajax之后，deleteAtc.php似乎无法正常工作。

我的删除页面代码（delete.php）

    <h4>Select an Article to Delete:</h4>

    <?php foreach ($articles as $article) { ?>

        <span><?php echo $article['article_title']; ?></span> <a href="#" id="link">Delete</a><br />

        <script type="text/javascript">
        $(function(){
            $('#link').click(function(){
                var id = <?php echo $article['article_id']; ?>;
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id"+id+,
                    sucess: function() {
                        $('#sucess').html(data);
                    }
                })
                return false;
            });
        });
        </script>
        <div id="success"></div><br />
    <?php } ?>

虽然我的deleteAtc.php代码：

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        echo "Article deleted";
    }
}    
?>

我在这里要做的是删除记录而不重定向到deleteAtc.php，它会删除记录并替换Article Deleted

~~我可以知道在ajax方面我哪里出错吗？~~

请参阅下面的更新问题

根据以下答案，这是我更新的代码：

delete.php

<h4>Select an Article to Delete:</h4>

<div id="message"></div>

<?php foreach ($articles as $article) { ?>

<span><?php echo $article['article_title']; ?></span> 
<a href="#" class="link" data-artid="<?php echo $article['article_id']; ?>">Delete</a><br />
<?php } ?>

脚本

<script type="text/javascript">
        $(function(){
            $('.link').click(function(){
                var elem = $(this);
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+elem.attr('data-artid'),
                    dataType:"json",  
                    success: function(data) {
                        if(data.success){
                               elem.hide();
                               $('#message').html(data.message);
                        }
                    }
                });
                return false;
            });
        });
        </script>

deleteAtc.php

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        //Also try to handle false conditions or failure
        echo json_encode(array('success'=>TRUE,'message'=>"Article deleted"));
    }
}    
?>

不知何故，如果我一次删除两条记录，只有第一条记录回显结果，第二条删除的结果不会回显结果。

我想知道，可以添加jquery动画来显示成功消息和.hide记录被删除了吗？

Answer 1

首先，ID并不意味着重复，而是使用类选择器。您还可以使用自定义数据属性来存储文章的ID。

尝试

<h4>Select an Article to Delete:</h4>

<div id="message"></div>

<?php foreach ($articles as $article) { ?>

<span><?php echo $article['article_title']; ?></span> 
<a href="#" class="link" data-artid="<?php echo $article['article_id']; ?>">Delete</a><br />
<?php } ?>

脚本

<script type="text/javascript">
        $(function(){
            $('.link').click(function(){
                var elem = $(this);
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+elem.attr('data-artid'),
                    dataType:"json",  
                    success: function(data) {
                        if(data.success){
                               elem.hide();
                               $('#message').html(data.message);
                        }
                    }
                });
                return false;
            });
        });
        </script>

在服务器端

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        //Also try to handle false conditions or failure
        echo json_encode(array('success'=>TRUE,'message'=>"Article deleted"));
    }
}    
?>

Answer 2

上面的脚本不起作用你必须改变如下。您一次又一次地重复相同的标识符功能。将jquery脚本保留在foreach循环之外。您必须使用文章ID添加class属性。

<h4>Select an Article to Delete:</h4>

    <?php foreach ($articles as $article) { ?>

        <span><?php echo $article['article_title']; ?></span> <a href="#" id="link" class='<?php echo $article['article_id']; ?>' >Delete</a><br />

        <div id="success"></div><br />
    <?php } ?>


        <script type="text/javascript">
        $(function(){
            $('#link').click(function(){
                var id = $(this).prop('class');
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+id,
                    sucess: function() {
                        $('#sucess').html(data);
                    }
                })
                return false;
            });
        });
        </script>

Answer 3

您使用id="link"创建多个链接。 ID必须是唯一的。

你必须写

id="link<? echo $article['article_id']; ?>"

以及

$('#link<? echo $article["article_id"]; ?>').click(function() {...})

Answer 4

<script language="javascript">
$(document).ready(function() {

    $(".delbutton").click(function(){
    var element = $(this);      
    var del_id = element.attr("id");
    var info = 'id=' + del_id;
        if(confirm("Sure you want to delete this record? There is NO undo!"))
        {
            $.ajax({
                 type: "GET",
                url: "products/delete_record.php",
                data: info,
                cache: false,
                success: function(){
                    setTimeout(function() {
                        location.reload('');
                    }, 1000);
                }
            });
                $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow");      
        }
        return false;
        //location.reload();
    });
});
</script>

ajax a href onclick获取php变量并执行php文件

4 个答案: