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