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

我试图找到解决方案，但我的技能有限。我将不胜感激。