刪除MySQL錶行使用jQuery的Ajax

Question

我想使它所以當我點擊一個圖標跨度會中的article_id發送到刪除我的文章我的PHP網頁的SQL，我使用jQuery的Ajax發送ID，該ID發送好嗎jQuery開發的一面，但HTTP POST請求完成後，我的錶行仍然存在，任何人都可以看到，如果有些事情錯我的代碼，在此先感謝！

<?php 
     $sql_categories = "SELECT art_id, art_title, art_company, art_cat_id, art_sta_id, art_date, art_rating, art_price, cat_id, cat_name, sta_id, sta_name 
       FROM app_articles LEFT JOIN app_categories 
       ON app_articles.art_cat_id = app_categories.cat_id 
       LEFT JOIN app_status 
       ON app_articles.art_sta_id = app_status.sta_id 
       ORDER BY art_order ASC"; 

      if($result = query($sql_categories)){ 
       $list = array(); 

       while($data = mysqli_fetch_assoc($result)){ 
        array_push($list, $data); 
       } 

       foreach($list as $i => $row){ 
       ?> 
        <div class="row" id="page_<?php echo $row['art_id']; ?>"> 
         <div class="column one"> 
          <span class="icon-small move"></span> 
          <a href="edit-article.php?art_id=<?php echo $row['art_id']; ?>"><span class="icon-small edit"></span></a> 
          <span id="<?php echo $row['art_id']; ?>" class="icon-small trash"></span> 
         </div> 
         <div class="column two"><p><?php echo $row['art_title']; ?></p></div> 
         <div class="column two"><p><?php echo $row['art_company']; ?></p></div> 
         <div class="column two"><p><?php echo $row['cat_name']; ?></p></div> 
         <div class="column one"><p><?php echo $row['art_date']; ?></p></div> 
         <div class="column one"><p><?php echo $row['art_rating']; ?></p></div> 
         <div class="column one"><p><?php echo $row['art_price']; ?></p></div> 
         <div class="column one"><p><?php echo $row['sta_name']; ?></p></div> 
         <div class="column one"><a href=""><span class="icon-small star"></span></a></div> 
        </div> 
       <?php 
       } 
      } 
      else { 
       echo "FAIL"; 
      } 
     ?> 


jQuery 

     $(document).ready(function(){ 

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

      var del_id = $(this).attr('id'); 

      $.ajax({ 
       type:'POST', 
       url:'ajax-delete.php', 
       data: 'delete_id='+del_id, 
       success:function(data) { 
        if(data) { 

        } 
        else { 

        } 
       } 

      }); 
     }); 

    }); 


PHP mySQL Statement 

    if(isset($_POST['delete_id'])) { 

     $sql_articles = "DELETE FROM app_articles WHERE art_id = ".$_POST['delete_id']; 

     if(query($sql_articles)) { 
      echo "YES"; 
     } 
     else { 
      echo "NO"; 
     } 
    } 
else { 
    echo "FAIL"; 
} 


?> 

Answer 1

您的行仍然存在的原因是因爲AJAX調用不刷新頁面。如果你想要刪除你行，你必須做的是這樣的：

假設您的跨度點擊事件是行

$(".trash").click(function(){ 
    var del_id = $(this).attr('id'); 
    var rowElement = $(this).parent().parent(); //grab the row 

    $.ajax({ 
      type:'POST', 
      url:'ajax-delete.php', 
      data: {delete_id : del_id}, 
      success:function(data) { 
       if(data == "YES") { 
        rowElement.fadeOut(500).remove(); 
       } 
       else { 

       } 
      } 
    }); 

內更換：

  data: 'delete_id='+del_id, 

有：

  data: delete_id : del_id,