php - 如何使用 Ajax 和 anchor 标记删除元素？

Question

我正在尝试创建一个类似堆栈溢出的标记系统。所以每个标签旁边都有一个小x，这样当用户删除它时，它就会从数据库中动态删除。只有输入标签的用户才能删除它们。我正在为 x 使用 anchor 标记，并使用 Ajax 将请求发送到 php 脚本，该脚本将删除该元素，如下所示:

<?php
    require_once("database_connection_handler.php");
    $x=$post->ID; 
    $i=0;
    $select_query = "Select * from wp_tags inner join wp_posts_tags on wp_posts_tags.tag_id=wp_tags.id where wp_posts_tags.post_id='". $x . "'";
    $result = mysql_query($select_query);
    $num=mysql_num_rows($result);
    echo "</ul>";
    echoTagHTML();
    while ($i < $num) {
        $tag=mysql_result($result,$i,"tag");
        $id=mysql_result($result,$i,"id");
        echo "<li>";
        tagLinks($tag,$id);
            if(is_current_user())
            {
            echo "<a href='javascript:void(0)' onclick='deleteTag($id);'>&nbsp x</a>";
            }   
            echo "</li>";
            $i++;
}echo "</ul></div>";

?>

处理此问题的 Ajax 代码是:

function deleteTag(str){
    if (str.length != 0){
            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();}
            else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
                xmlhttp.open("GET","links/livesearch.php?del="+str,true);
                xmlhttp.send();
                            }
    else{return;}
}

PHP 脚本是:

<?php 
$del=$_GET["del"];
ConnectToDB();
$delete_query="delete from wp_tags where id='".$del."'";
    if(!mysql_query($delete_query))
    {
        echo "error while deleting";
    }
mysql_close($con);
?>

我是 Ajax 的新手。当我单击应该删除用户的链接时，它没有删除任何内容。它不会从数据库中删除标签或从页面中删除链接。我错过了什么？任何帮助，将不胜感激。谢谢。

Answer 1

注意到您标记了问题“jQuery”并假设 HTML 是这样的:

<div id="tagsContainer">
    <div class="tagWrapper">
        <a href="..." class="tag">php</a>
        <button class="tagDelete">X</button>
    </div>
    <div class="tagWrapper">
        <a href="..." class="tag">javascript</a>
        <button class="tagDelete">X</button>
    </div>
</div>

你的 javascript 应该是这样的:

$(function() {
    $("#tagsContainer").on('click', ".tagDelete", function() {
        var $deleteButton = $(this).attr('disabled', true),
            $wrapper = $deleteButton.closest(".tagWrapper"),
            $tag = $wrapper.find('.tag');
        $.ajax({
            url: "links/livesearch.php"
            data: {
                action: 'tagdelete',
                tag: $tag.text(),
                //other params here, eg. to identify the user and the context of the deletion
            },
            success: function(data, textStatus, jqXHR) {
                $wrapper.remove();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $deleteButton.attr('disabled', false),
                //display error message?
            }
        });
    });
});

本质上，这会放置一个处理程序，该处理程序将响应 #tagsContainer 中的所有 .deleteTag 按钮，通过进行 ajax 调用，并在收到成功响应时从服务器，从 DOM 中删除标签(及其 .deleteTag 按钮)。

这里有很多猜测，因此您还有一些工作要做(并调试服务器端脚本)。