Ajax可以更新动态导航菜单吗？

Question

我正在使用PHP函数来确定正在显示的链接：

<?php
  //amend toplinks if logged in
  if($general->loggedIn()){ ?>
    <nav class = "memberHeaderArea">
      <ul>
        <li>
          <a href="userProfile.php?username=<?php echo $user['username'];?>">Profile<span class="user icon"></span></a>
        </li>
        <li>
          <a href="userLogout.php">Log out<span class="lock icon"> </span></a>
        </li>
      </ul>
    </nav>
  <?php
    //toplinks for when not logged in
  }else{ ?>

我刚刚更改了登录结构以使用Ajax，并且除了nav之外，它都可以完美运行。 它仍然显示登录/注册，直到调用页面刷新为止。 显然，使用Ajax的原因是为了避免刷新页面，但是有什么方法可以在成功函数中更新这些链接吗？

success: function(data) {
  $("#statusLogin").hide();
  if(data.success == true){
    $('#loginContent').slideToggle();
  }else{
    // alert("data.message... " + data.message);//undefined
    $("#error").show().html(data.message);
  }

从我发现的结果看，我可能需要分配导航的ID，然后使用Ajax / jQuery来定位该ID。 但是我不确定如何。 任何帮助，不胜感激。

Answer 1

这是基本的（也是虚拟的）东西，用于在页面加载后使用AJAX检查登录状态。 也许您想更认真地检查if(true)和echo调用，但这将是这样的：)检查下面的小提琴，这样您也可以看到html和css ...

$.getJSON('/echo/json/').done(function (data) {
    console.log("Call returned");
    if (true){
        //successful login
        $('#loggedin').slideToggle();
    }else {
        //unsuccessful login
        $('#login').slideToggle();
    }
}).fail(function (data) {
    console.log("Call failed");
    $('#login,#error').slideToggle();
}).always(function (data) {
    console.log("Always running");    
});

JSFiddle