jQuery的AJAX DELETE不工作

-4

  $("body").on("click", "a", function(){ 

       var ID = $(this).attr("id"); 
       $.ajax({ 
        url: url + '?' + $.param({"id": ID}), 
        type: 'DELETE', 
        success: function(){alert("Entry deleted");} 
       }); 

      });

更具體地說，它是不正常的Ajax請求。點擊其中一個「刪除」鏈接後沒有顯示警告消息，因此顯然ajax-request沒有成功。

整個代碼如下（對於某些上下文）：

<!DOCTYPE html> 
 
<html lang="de-DE"> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <style> 
 
     body { 
 
     font: 15px normal Arial, sans-serif; 
 
     color: #000000; 
 
     } 
 
     label { 
 
     width: 5em; 
 
     display: inline-block; 
 
     } 
 
     ul { 
 
     padding: 0; 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
 
    </script> 
 
    <script> 
 
     $(document).ready(function(){ 
 

 
     var url = "https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php"; 
 

 
     /******Code to show the content of the server file: *******************/    
 
      $.get(url, function(data){ 
 

 
      var table = document.createElement("table"); 
 
      $("body").append(table); 
 
      var tbody = document.createElement("tbody"); 
 
      $("table").append(tbody); 
 

 
      for(var i=0; i<data.length; i++){ 
 
      $("tbody").append("<tr><td>" + data[i]["name"] + "</td><td>" + data[i]["text"] + "</td><td><a id=\"" + data[i]["id"] + "\" href=\"\">Delete</a></td></tr>"); \t \t 
 
      } 
 

 
     }); 
 
     /**************************************************************************** 
 

 
      *****Code to delete an entry (with a specified id) in the server file:****/ 
 

 
      $("body").on("click", "a", function(){ 
 

 
      var ID = $(this).attr("id"); 
 
      $.ajax({ 
 
       url: url + '?' + $.param({"id": ID}), 
 
       type: 'DELETE', 
 
       //success: function(){$(this).closest("tr").remove();} 
 
       success: function(){alert("test");} 
 
      }); 
 

 
      }); 
 

 
     /**********************************************************************/ 
 

 

 
     });   
 
    </script> 
 
    </head> 
 
    <body> 
 
    <h1>Guestbook</h1> 
 
    <ul> 
 
     <li><b>TestUser:</b> This is an example entry. <a href="#" alt="Delete entry">(X)</a></li> 
 
     <li><b>TestUser2:</b> This is another example entry. <a href="#" alt="Delete entry">(X)</a></li> 
 
    </ul> 
 
    <hr> 
 
    <form method="POST" action="https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php"> 
 
     <label for="name">Name</label> <input id="name" type="text" name="name" placeholder="Name"><br> 
 
     <label for="text">Text</label> <input id="text" type="text" name="text" placeholder="Text"><br> 
 
     <button type="submit">Add entry</button> 
 
    </form> 
 
    </body> 
 
</html>

********************* ********更新***************************

下面是我的網絡部分截圖在按下「刪除」鏈接之後的開發者工具：

如果我沒有記錯的話，沒有任何地方顯示任何錯誤消息...

來源

2017-02-15 Tommy

學會調試，打開你的開發工具，轉到網絡選項卡，單擊** XHR **只顯示您的XHR請求，然後執行您的刪除操作並查看服務器實際響應的外觀。 – Adam

你在開發者工具中看到了什麼？你得到什麼信息或錯誤？您應該使用一些基本的調試技巧來幫助您。 – j08691

控制檯中沒有任何消息..這是我沒有得到的東西之一...... – Tommy

您的網頁沒有被髮送AJAX請求，因爲它立即從當前頁面導航離去，當你點擊一個鏈接（瀏覽器的默認操作）。

return false在你的點擊處理程序結束（或者，您可以將其重新寫這樣的）：

$('body').on('click','a',function(e) { 
    e.preventDefault(); 
    //rest of your code 
});

來源

2017-02-15 16:59:17 Adam

jQuery的AJAX DELETE不工作

回答

相關問題