通過Ajax將頁面載入Div最佳實踐？

我正在使用下面的方法將遠程頁面加載到頁面上的div中。通過Ajax將頁面載入Div最佳實踐？

$('#result').load('www.myurl.com/results.html');

我很好奇，它是一個不好的做法，另一個頁面內加載一個完全格式化的HTML頁面？我的擔心更多的是加載CSS或額外的JavaScript包括可能會覆蓋主頁上的其他元素。

我在最初的測試中沒有遇到任何問題，我只是不確定這是否是最佳做法。

澄清：如果我有一個主網頁像這樣

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="mycss.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="remoteContainer"></div> 
     <script> 
      $('#remoteContainer').load('www.myurl.com/results.html'); 
     </script> 
    </body>

而且results.html代碼看起來像這樣：

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="myResults.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <header>   
      <h1>My Results Page</h1> 
     </header> 
     ... 
    </body>

請問CSS和JS互相覆蓋，或將這些頁面作爲兩個獨立的實體嗎？

來源

2013-03-26 TheJason

我將認爲'.html'你'負載（）'成'div'類似於僅包含部分HTML的「partialView」，並且所有相關的CSS和JavaScript已經存在於主要的'.html'文件中。或者如[** jivings **]（http://stackoverflow.com/users/334274/jivings）中所述，回答您只能定位頁面的一部分。如果您決定加載包含''的完整HTML頁面，是否會導致HTML無效？ – Nope 2013-03-26 21:11:53

它們將互相覆蓋，results.html將成爲您的原始頁面的一部分，它不會是它自己的頁面。 html/head/body標籤將被刪除，留下他們的孩子。 – 2013-03-26 21:13:01

@KevinB：+1尼斯。至少無效的HTML將被照顧。很高興知道相關標籤被刪除。 – Nope 2013-03-26 21:14:55

這將工作正常，瀏覽器將正確處理它。從jQuery docs：

...瀏覽器往往是從文件過濾元件如<html>，<title>，或<head>元素。因此，由.load（）檢索的元素可能不完全相同，就好像文檔由瀏覽器直接檢索。

但是，它可能是更好的做法，指定要插入在返回的HTML元素：

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

來源

2013-03-26 21:12:17 Jivings

+1，該建議具體。像這樣的句子：「瀏覽器經常過濾元素......」似乎並不能確保瀏覽器100％會這樣做。 – Nope 2013-03-26 21:16:30

@FrançoisWahl確切地說，要確保你插入你想要的東西要好得多。 – Jivings 2013-03-26 21:18:16

+1，但如果海報可以修改他正在服務器端加載的頁面，那麼這可能是更好的方法。看到我的答案。 – undefined 2013-03-26 22:30:38

好了，也許我應該只採取一看DevTools之前，我問題。

在回顧了元素檢查器之後，我現在看到（至少在Chrome中）瀏覽器去掉了HTML，HEAD和Body標籤。它還刪除了額外的jquery include。但是它確實離開

<script>my js functions here</script>

雖然我明白，我不能相信，所有的瀏覽器將被視爲有效，至少我現在已經看到了曙光。

來源

2013-03-26 21:40:40 TheJason

我同意它'應該''很好'。但是考慮一下你正在創建的額外開銷，可以通過從服務器返回你需要的內容來消除。您可能正在觸碰數據庫以檢索在您丟棄的頁面部分中呈現的數據。例如，您可能會在每個頁面的頂部顯示有關用戶的信息。或者你可能正在查找其他信息進入你的頁面元標記頭。你可能有一些類型的服務器端模板來創建這些頁面的多餘部分。然後，您將這些多餘的內容放入響應中，通過電報發送，然後讓瀏覽器解析它，創建html元素，然後刪除不需要的部分。

這可能不是什麼大不了的事。這取決於你獲得了多少流量，服務器做了多少額外的工作來渲染整個頁面，服務器負載的多少，以及你有多少時間/金錢/人力，而不是多少以便能夠發送修剪下來的響應。如果這是一個小型項目，交通流量很小，這可能不值得改變。但這也可能是一個簡單的改變。由於這個問題是關於最佳實踐的，我會說不，加載整頁來渲染頁面的一部分並不是最佳實踐。最佳做法是從服務器返回所需的內容，並使用它來更新頁面。這可以是預先呈現的HTML，也可以是JSON，但這完全是另一個討論。

PHP中的平凡解可以像下面一樣簡單，使用format = AJAX在您的查詢字符串：？

<?php 
$ajax = $_GET['format'] == 'ajax'; 

if (!$ajax) { 
    render_head_and_stuff(); 
} 

render_results(); 

if (!$ajax) { 
    render_footer_and_stuff(); 
}

來源

2013-03-26 22:18:18 undefined

通過Ajax將頁面載入Div最佳實踐？

回答

相關問題