title: ajax is loading the page to return a POST request
body: <p>When i make a "POST" request through ajax, the page is loading when returning the request.</p>
  
  <p>Don't we use ajax to prevent the entire page to reload ?</p>
  
  <p>This is my html code:</p>
  
  <pre><code>&lt;form method="post"&gt;
  &lt;div align="center" class="col-md-10"&gt;
      &lt;input  type="text" id= "input" name="input" &gt;
   &lt;/div&gt;&lt;
   &lt;div class="form-group"&gt;
      &lt;button type="submit" class="btn btn-default" id="search"&gt;
       Search
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>and this is my ajax request:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
      $(".search").on('click', function () {
              var data = {};
              data['input'] = $('#input').val();
              // Submit data via AJAX§
              $.ajax({
              url: '/home',
                      type: 'post',
                      data: data,
                      success: function (data) {
                      }
              });
      });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Do anyone knows how to fix this problem and what i am doing wrong !!!</p>