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不工作

回答

相关问题