Question

我的代码的以下部分不起作用：

           $("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请求未成功。

整个代码如下（对于某些上下文）：

<!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>");		
          }

        });
        /****************************************************************************

          *****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>

******** UPDATE ***************** **********

在按下“删除”链接之后，这是我的Developer-Tools网络部分的屏幕截图：

如果我没弄错的话，任何地方都没有显示任何错误信息......

Answer 1

您的页面未发送AJAX请求，因为当您单击链接时（浏览器的默认操作），它立即从当前页面导航。

点击处理程序结束时的

<head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> <script> function callconfirm() { var isConfirmed BootstrapDialog.confirm({ title: 'WARNING', message: 'Warning! Drop your banana?', type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY closable: false, // <-- Default value is false draggable: false, // <-- Default value is false btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel', btnOKLabel: 'Drop it!', // <-- Default value is 'OK', btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used, callback: function(result) { // result will be true if button was click, while it will be false if users close the dialog directly. if(result) { isConfirmed=true; console.log(isConfirmed); }else { isConfirmed=false; console.log(isConfirmed); } } }); } </script> </head> <body> <button type="button" value="click" onclick="callconfirm()" style="height: 50px;width: 50px" /> </body>（或者，您可以像这样重写它）：

return false

jQuery ajax DELETE无法正常工作

1 个答案: