ajax - Ajax を使用したブートストラップ ドロップダウン

Question

Bootstrap 3 を使用しており、ドロップダウンをクリックした後にアクションを取得しようとしています。

私の現在の問題は、特定のコンテンツを更新するのではなく、ページ全体をリロードしたことです。

これは私の現在のコードです：

<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>

次に、結果を表示したい div があります。

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

これは ajax 呼び出しです。

$(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);    
      }
    });
  });
});

解決策を見つけようとしましたが、私のスキルは限られています。どんな助けにも感謝します。