title: Ajax request for PHP to return HTML
body: <p>I have an element on a page that when clicked will make an ajax request to a <code>receiver.php</code> file:</p>
  
  <pre><code>&lt;script&gt;
  function send(id){
      $.ajax({
          type: 'POST',
          dataType: 'html',
          url: 'receiver.php',
          data: {id: id}
      });
  }
  &lt;/script&gt;
  
  &lt;img src="foo.bar" onclick="send(id)"/&gt; &lt;!-- simplified --&gt;
  </code></pre>
  
  <p>My idea is that this <code>receiver.php</code> file will receive the <code>id</code>, then output a whole page of HTML based on that <code>id</code></p>
  
  <p>However, when I click on the element, the new HTML page that I expect doesn't show up. When I go to the Chrome inspector, Network tab I can see the request and the response is exactly the HTML content I need, but why doesn't it change to that new page and stay on the old page instead?</p>
  
  <p>EDIT: This is my <code>receiver.php</code>, for testing purpose:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;?php
          echo "&lt;p&gt;".$_POST['comid']."&lt;/p&gt;";
          echo "&lt;p&gt; foo foo &lt;/p&gt;";
      ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is the response:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;3&lt;/p&gt;&lt;p&gt; foo foo &lt;/p&gt;    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>