title: asynchronous ajax request not working asynchronously
body: <p>I have the following problem: I'm using jQuery ajax requests to add or delete entries from a server file.</p>
  
  <p>My code works insofar as the entries are added and deleted as expected when clicking on the respective buttons. </p>
  
  <p>However, the action adding entries is not done asynchronously. That is, I have to reload the whole page before the respective action takes effect.</p>
  
  <p>I have not(!!) changed the default settings of the ajax request, i.e. I have not added "Async: false". Still, the code isn't working asynchronously. (I even tried  adding "Async: true" to explicitly say that the request is to be made asynchronously ... however, to no avail) .</p>
  
  <p>Here is the ajax method that isn't working as expected:</p>
  
  <pre><code>        $("button").on("click", function(){
  
              var name = $("#name").val();
              var text = $("#text").val();
  
              $.post(url, {name: name, text: text});
  
          });
  </code></pre>
  
  <p>Why is this request not asynchronous? How can I make it asynchronous?</p>
  
  <p>***************************UPDATE*********************************************</p>
  
  <p>The following screenshot provides some details regarding the server/language:</p>
  
  <p><a href="https://i.stack.imgur.com/aCaSg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aCaSg.png" alt="enter image description here"></a></p>
  
  <p>****************************UPDATE2***********************************************</p>
  
  <p>Here is - for context - the code in its entirety:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de-DE"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;style&gt;
              body {
                  font: 15px normal Arial, sans-serif;
                  color: #000000;
              }
              label {
                  width: 5em;
                  display: inline-block;
              }
              ul {
                  padding: 0;
              }
          &lt;/style&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;
          &lt;/script&gt;
          &lt;script&gt;
          $(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&lt;data.length; i++){
                      $("tbody").append("&lt;tr&gt;&lt;td&gt;" + data[i]["name"] + "&lt;/td&gt;&lt;td&gt;" + data[i]["text"] + "&lt;/td&gt;&lt;td&gt;&lt;a id=\"" + data[i]["id"] + "\" href=\"#\"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;");       
                  }
  
              });
  
  
              $("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});
  
              });
  
  
          });          
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Guestbook&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;b&gt;TestUser:&lt;/b&gt; This is an example entry. &lt;a href="#" alt="Delete entry"&gt;(X)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;b&gt;TestUser2:&lt;/b&gt; This is another example entry. &lt;a href="#" alt="Delete entry"&gt;(X)&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;hr&gt;
          &lt;form method="POST" action="https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php"&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input id="name" type="text" name="name" placeholder="Name"&gt;&lt;br&gt;
                  &lt;label for="text"&gt;Text&lt;/label&gt; &lt;input id="text" type="text" name="text" placeholder="Text"&gt;&lt;br&gt;
                  &lt;button type="submit"&gt;Add entry&lt;/button&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>*********************************UPDATE4*****************************************</p>
  
  <p>After adding something, I'm redirected to a page with containing a message looking similar to the following screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/7uyXI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7uyXI.png" alt="enter image description here"></a></p>