异步ajax请求不能异步工作

我有以下问题：我正在使用jQuery ajax请求来添加或删除服务器文件中的条目。异步ajax请求不能异步工作

我的代码在单击各个按钮时添加和删除条目的情况下工作。

但是，操作添加条目不是异步完成的。也就是说，我必须在各个操作生效之前重新加载整个页面。

我没有（!!）改变了ajax请求的默认设置，即我没有添加“Async：false”。尽管如此，代码并不是异步工作的。（我甚至尝试添加“Async：true”来明确表示请求是异步创建的......但是，无济于事）。

这里是预期不工作作为Ajax方法：

 $("button").on("click", function(){ 

      var name = $("#name").val(); 
      var text = $("#text").val(); 

      $.post(url, {name: name, text: text}); 

     });

为什么这个要求不是异步的？我怎样才能使它异步？

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

下面的截图提供了有关服务器/语言的一些细节：

**************************** UPDATE2 ******************* ****************************

下面是 - 对于上下文 - 代码的全部内容：

<!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"; 

      $.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>");  
       } 

      }); 


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

       e.preventDefault(); 
       var ID = $(this).attr("id"); 

       $.ajax({ 
        url: url + '?' + $.param({"id": ID}), 
        type: 'DELETE', 
        success: function(){$("#" + ID).closest("tr").remove();}, 
        error: function(){alert("error");}   
       }); 

      }); 


      $("button").on("click", function(){ 

       var name = $("#name").val(); 
       var text = $("#text").val(); 

       $.post(url, {name: name, text: text}); 

      }); 


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

********************************* UPDATE4 *********** ******************************

添加内容后，我被重定向到一个包含消息的页面类似下面的截图：

来源

2017-02-15 Tommy

我给你一个提示：在你的成功回调中''这个''这个''你得到一个id ... –

@JaredSmith是一个提示，队友？这就是这个问题的答案 –

@JaredSmith非常感谢你......删除请求现在可以异步工作......但是，发布请求仍然是同步的......你也知道为什么会这样吗？ – Tommy

你的问题是你正在做一个表单提交，将你带到另一个页面。如果你想留在同一个页面上，那么你可以去掉表单提交，并使用jquery post请求，就像你写的那样，可能是成功回调。但不要试图混合两者。如果你想异步然后重定向，只需从jquery post请求的成功处理程序中执行JavaScript重定向。

来源

2017-02-15 18:33:08

另一种选择是捕获表单提交事件，取消表单提交，然后在该处理程序中执行您的Ajax。 –

要在意见扩大，这是他们所提出的建议是什么：

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

     e.preventDefault(); 
     var $that = $(this); 
     var ID = $that.attr("id"); 

     $.ajax({ 
      url: url + '?' + $.param({"id": ID}), 
      type: 'DELETE', 
      success: function(){$that.closest("tr").remove();}, 
      error: function(){alert("error");}   
     }); 

    });

来源

2017-02-15 18:03:44

谢谢，我明白了。但为什么其他请求不是异步的 – Tommy

异步ajax请求不能异步工作

回答

相关问题