JQuery：AJAX「get」響應混亂了HTML標記

我正在設置我的網頁，以便在用戶單擊導航鏈接時使用JQuery更新頁面而無需刷新。我的頁面的基本結構如下所示：JQuery：AJAX「get」響應混亂了HTML標記

<!DOCTYPE html > 
<html> 
<head> 
    <title><?php if(x($page,'title')) echo $page['title'] ?></title> 
    <script>var baseurl="<?php echo $a->get_baseurl() ?>";</script> 
    <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> 
</head> 
<body> 
    <div class='main-container'> 
     <?php if(x($page,'nav')) echo $page['nav']; ?> 
     <div class='main-content-loading'><img src="/view/theme/zp/ajax-loader.gif" alt="Please wait..."></div> 
     <div class='main-content-container'> 
     <aside><?php if(x($page,'aside')) echo $page['aside']; ?></aside> 
     <section><?php if(x($page,'content')) echo $page['content']; ?> 
      <div id="page-footer"></div> 
     </section> 
     <right_aside><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></right_aside> 
     <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer> 
     </div> 
    </div> 
</body> 
</html>

主要部分使用PHP腳本填充。

我使用更新頁面jQuery的功能

$(document).ready(function() { 

    $('.nav-load-page-link').click(function() { 
     getPageContent($(this).attr('href')); 
     hideNavMenu('#' + $(this).closest('ul').attr('id')); 
     return false; 
    }); 
} 

function getPageContent(url) { 

    var pos = $('.main-container').position(); 

    $('.main-container').css('margin-left', pos.left); 
    $('.main-content-container').hide(0, function() { 
     $('.main-content-loading').show(0); 
    }); 

    $.get(url, function(html) { 
     console.log($('.main-content-container').html()); 
     $('.main-content-container').html($('.main-content-container', html).html()); 
     console.log($('.main-content-container').html()); 
     $('.main-content-loading').hide(function() { 
      $('.main-content-container').fadeIn(800,function() { 
       $('.main-container').css('margin-left', 'auto'); 
      }); 
     }); 
    }); 
}

我有控制檯日誌記錄命令如圖所示，這讓我看到的HTML是什麼之前和應用GET請求後的結果。

所以發生的奇怪的事情是，特別是對於一個頁面，如果我通過在瀏覽器地址欄中輸入URL來加載它，它會按預期加載。但如果我使用我的JQuery函數加載它，HTML標籤顯示亂碼。例如，看起來像下面的表單，當我鍵入網址到地址欄加載

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post"> 
<input id="side-follow-url" name="url" size="24" title="Example: [email protected], http://example.com/barbara" type="text"> 
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</form> 
</div>

出來像下面當我使用jQuery函數

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post"> 
</form> 
<input id="side-follow-url" name="url" size="24" title="Example: [email protected], http://example.com/barbara" type="text"> 
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</div>

或圖片鏈接看起來像下面，當我鍵入URL到地址欄

<a href="https://some-place" title="some-title"> 
<img src="https://img-loc" alt=""> 
</a>

出來像jQuery函數如下

<a href="https://some-place" title="some-title"> 
</a> 
<img src="https://img-loc" alt="">

有沒有人有任何想法，爲什麼發生這種情況？

來源

2012-07-16 fermionic

解決方案是確保您從服務器發回的html有效。 Jquery 1.4+將強制有效的HTML。例如：

<table> 
    <tr> 
    <td>generated html from server</td> 
    </tr> 
    <tr> 
    <td>generated html from server</td> 
    </tr> 
<div> 
    <form> 
     <input type="text"> 
    </form>

以上將無法驗證，因爲缺少</table>標記。 jquery會嘗試修復它，並且經常會混淆它。

來源

2012-10-17 21:43:44 Rodney

JQuery：AJAX「get」響應混亂了HTML標記

回答

相關問題