title: With ajax only reload div when submit Form
body: <p><br>
  I have a simple <i>FORM</i>, one <i>INPUT</i> and one <i>SUBMIT Button</i>. The data from there will be sent to a <i>PHP </i>script, which sends this to a db and then puts it inside of an <i>DIV</i>. (with smarty)<br>
  Without the Ajax, it works just fine, the data goes to the db, it will be displayed and so on. But with Ajax, it would be faster and more lightweighted.</p>
  
  <p>Normally, the submit reloads the Page or redirects to the page I defined.<br><br>
  But is there a way to just reload the DIV after doing the Submit?</p>
  
  <p><b>The html:</b></p>
  
  <pre><code>&lt;div&gt; &lt;!-- THE DATA FROM THE FORM VIA PHP --&gt; &lt;/div&gt;
  
  &lt;form id='foo'&gt;
  &lt;input type='text'&gt;
  &lt;input type='submit'&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><b>The JQuery so far:</b></p>
  
  <pre><code>$('#foo').submit(function(event){
    $.ajax({
      url: 'index.html',
      type: 'post,
      data: $('#foo').serialize(),
      success: function(response, textStatus, jqXHR){
        console.log('worked fine');
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log('error(s):'+textStatus, errorThrown);
      }
    });
  });
  </code></pre>