使用Ajax进行Bootstrap下拉

I am using Bootstrap 3 and I am trying to obtain an action following the click on a dropdown.

My current issue is that I got the entire page reloaded instead of updating the content of a specific .

This is my current code:

<div class="dropdown pull-right">
   <button type="button" class="btn btn-default" data-toggle="dropdown">Mybutton!</button>
   <ul class="dropdown-menu test" role="menu">
     <li role="presentation" class="dropdown-header">Select your action</li>
     <li><a href="#">Action 1</a></li>
     <li><a href="#">Action 2</a></li>
     <li><a href="#">Action 3</a></li>
   </ul>
</div>

Then I have a div that where I would like to show the result:

<div id="result">
  <?php
    $test = $_POST['sentData'];
    echo $test;
    echo 'something else to write here';
  ?>
</div>

This is the ajax call:

$(document).ready(function() {
    $('.test li a').on('click', function () {
      var sentData = $(this).html();
    $.ajax({
      type: "POST",
      url: "design7.php",
      data: "sentData=" + sentData,
      dataType: "html",
      success: function(data)
      {
          $('#result').html(data);    
      }
    });
  });
});

I have tried to find a solution but my skills are limited. I will appreciate any help.