如何使用Ajax和錨標籤刪除元素？

我正在嘗試創建一個像堆棧溢出一樣的標記系統。所以每個標籤旁邊都有一個小的x，這樣當用戶刪除它時，它會被動態地從數據庫中刪除。只有輸入標籤的用戶才能刪除它們。我使用的X錨標記和發送使用Ajax的PHP腳本將按如下方式刪除元素的要求：如何使用Ajax和錨標籤刪除元素？

<?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真的很陌生。當我點擊應該刪除用戶的鏈接時，它不會刪除任何內容。它不會從數據庫中刪除標籤或從頁面中刪除鏈接。我錯過了什麼？任何幫助，將不勝感激。謝謝。

來源

2012-06-13 Maddy

應該是：''從wp_tags中刪除，其中tag ='「。$ del。」'「;' –

我給你一些提示：如果你創建了簡單的函數，比如echoTagHTML（$ name，$ id）'' getPostTags（$ id）'等等，你可以使你的代碼更具可讀性，更容易找到錯誤，擴展它等等。 – hakre

它實際上是從wp_tags中刪除的。我不知道查詢是如何通過的。我的錯。我編輯它 – Maddy

注意到你所標記的問題「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按鈕）。

這裏有很多猜測，所以你還有一些工作要做（並調試服務器端腳本）。

來源

2012-06-13 22:46:44

太棒了！謝謝。 :) – Maddy

如何使用Ajax和錨標籤刪除元素？

回答

相關問題