Bootstrap dropdown with Ajax - ajax

Question

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>Action 1</li>
<li>Action 2</li>
<li>Action 3</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.