如何使用 Ajax 和锚标记删除元素 - How to delete an element using Ajax and anchor tag?

How to delete an element using Ajax and anchor tag?

本文关键字：删除元素何使用 Ajax | 更新日期: 2023-09-27

我正在尝试创建一个像堆栈溢出这样的标记系统。因此，每个标签旁边都有一个小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);
?>

我对阿贾克斯真的很陌生。当我单击应该删除用户的链接时，它不会删除任何内容。它不会从数据库中删除标记或从页面中删除链接。我错过了什么？任何帮助将不胜感激。谢谢。

注意到你标记了问题"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?
            }
        });
    });
});

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

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