单击 div 后 Jquery 从数据库中删除数据答案

【问题标题】：Jquery removing data from database after div is clicked单击 div 后 Jquery 从数据库中删除数据
【发布时间】：2014-10-11 07:05:01
【问题描述】：

我想制作一个警报系统，在用户屏幕上弹出一个警报，但是我遇到了一个主要问题，我不知道如何完全删除该 div，我知道我需要将其从数据库中删除，但这就是我遇到的麻烦，我似乎无法找到一种方法从数据库中获取 div 的 ID 以用于从数据库中删除。这是我的尝试。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>    
$(document).ready(function()
{

    $(".alert").draggable();    
    $(".alert").click(function()
    {           
        var test = $("#warning").val();
        alert(test);
        $(this).fadeOut("fast");

    }); 
}); 
</script>
<style>
#warning
{   
    width:150px;
    height:150px;
    border:1px solid red;
    background-color:rgb(230, 30, 30);
    border-radius:5px;
    padding:5px;    
}   
#notice
{   
    width:150px;
    height:150px;
    border:1px solid yellow;
    background-color:rgb(230, 80, 30);
    border-radius:5px;
    padding:5px;    
}   
#generic
{   
    width:150px;
    height:150px;
    border:1px solid grey;
    background-color:rgb(150, 150, 150);
    border-radius:5px;
    padding:5px;    
}
.blue
{   
    font-weight:bold;   
}   
</style>
<?php
function display_alerts($user_id)
{   
    $connect = mysqli_connect("localhost", "root", "asdfghjkl", "database");
    $query = mysqli_query($connect, "SELECT * FROM `alerts` WHERE `user` = '$user_id'");
    while($row = mysqli_fetch_assoc($query))
    {       
    ?>          
        <div id="<?php echo $row["style"]; ?>" value = "<?php echo $row["id"]; ?>" class="alert"><?php echo $row["message"]; ?></div>
        <?php       
    }       
}
display_alerts("10");
?>

【问题讨论】：

在这种情况下为什么不只使用表单，fyi .val() 用于表单输入。但如果你真的坚持通过这些 div 完成这项工作，你可以使用 ajax
@Ghost 这就是我需要帮助的地方，我不太擅长 Ajax，而且我不太擅长 JQuery。我确实添加了<form action="#" method="post">，但结果仍然没有变化。
那么就用普通的形式。为什么要把事情复杂化？只需像您一样循环条目并将它们包装在表单标签中。当然这只是开始，您必须处理表单并使用删除语句。仅使用 <form action="#" method="post"> 不会删除这些记录

标签： javascript php jquery html css

【解决方案1】：

如果您想要 $.ajax() 路由，只需调用将处理该过程的 PHP：

$(".alert").click(function(){           

    var id = $(this).attr('value'); // where the id resides on the markup
    $.ajax({
        url: 'delete_alert.php',
        type: 'POST',
        dataType: 'JSON',
        data: {id : id},
        success: function(response) {
            alert(response.message);

        }
    });

    $(this).fadeOut("fast");
});

然后在你的 PHP (delete_alert.php) 中：

if(isset($_POST['id'])) {
    $message = '';
    $db = new mysqli("localhost", "root", "asdfghjkl", "database");
    $id = $db->real_escape_string($_POST['id']);
    $query = $db->query("DELETE FROM alerts WHERE id = '$id' ");
    if($query->affected_rows > 0) {
        $message = 'delete successful';
    } else {
        $message = 'delete failed';
    }

    echo json_encode(array('message' => $message));
    exit;
}

【讨论】：

谢谢，效果很好，我以前从未以这种方式使用过 Ajax，所以我很高兴我可以尝试一些新的东西。
@user3867184 很高兴这有帮助

【解决方案2】：

你可以通过$(this).attr("id")获取id

然后您必须将此 id 传递给 php 页面以进行删除。正如 Ghost 建议的那样，您可以使用表单或jQuery ajax 电话。

【讨论】：

谢谢，我想我可以通过 PHP 处理删除它（这是我知道的唯一 Ajax，因为我一直在进行实时聊天。）让我再测试一下，我会的接受你的答案 c:
快速提问，这是我删除数据的方式，是通过 XMLHTTPRequest，这是我的代码 xhttp = new XMLHttpRequest(); xhttp.open("http://localhost/LID/remove_moderator_alert.php?alert_id="+ alert_id +"", true); xhttp.send();（它在一个新函数中）我收到此错误：Uncaught SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': 'http://localhost/LID/remove_moderator_alert.php?alert_id=1' is not a valid HTTP method.知道如何解决吗？
检查幽灵的答案。这也是它的使用方式。