Question

我正在尝试创建一个像堆栈溢出一样的标记系统。因此，每个标记旁边都有一个小x，这样当用户删除它时，它将过于动态地从数据库中删除。只有输入标签的用户才能删除它们。我正在为x使用锚标记，并使用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?
            }
        });
    });
});

基本上，这会产生一个处理程序，它将响应.deleteTag中的所有#tagsContainer按钮，通过进行ajax调用，并且当从服务器收到成功的响应时，删除标记（来自DOM的.deleteTag按钮。

这里有很多猜测，所以你还有一些工作要做（并调试服务器端脚本）。

如何使用Ajax和anchor标签删除元素？

1 个答案: