如何鏈接到新頁面並使用ajax加載div？

我有一個主要登錄頁面，左側是過濾器導航，右側是不同文章類型的列表。當用戶點擊文章時，他們會轉到新的着陸頁面，但我在左側有一個過濾器導航副本，以便他們可以單擊新的過濾器以返回到帶有修訂列表的主頁面，或者文章。如何鏈接到新頁面並使用ajax加載div？

我的HTML看起來像：

<li><a href="#internet-nav" id="internet-nav-articles">Internet Articles</a></li>

我的內容應加載：

<div id="#insights-div-articles"> </div>

和我的JavaScript看起來像：

$(document).ready(function(){ 
$(".-categories a").on("click", function(e) { 
    e.preventDefault(); 
}); 
$("#internet-nav-articles").on("click", function(){ 
    $(window.location = '/insights-and-news/internet-articles/').load("insights-category-divs/internet-articles-tab #insights-div-articles"); 
}); 

});

預先感謝您的任何幫助，我敢肯定，我的JavaScript是關閉的，只是試圖學習

來源

2016-12-13 Robert

你從哪裏學到了'$（window.location = ...'語法？當你在這種情況下將jquery和html dom元素混合使用時，你期望什麼？ – JOUM

爲什麼你不使用普通鏈接你試圖做一個window.location） – Jeff

我試圖鏈接到一個新的頁面，但加載的東西不同於什麼是加載在div的默認值。例如，默認情況下，我加載內容來自'/ insights-category-divs/all-categories-tab' in'

'，但是如果用戶點擊文章着陸頁的不同過濾器，我希望它從'insights-category-divs/internet- articles-tab' – Robert

我結束了使用從上述評論的參數建議。有可能是一個更清潔的方式做到這一點，但我的最終代碼如下所示：

例如，用戶點擊http://www.example.com/#filter=internet

$(document).ready(function(){ 

var url = window.location.href; 
var insightfilter = url.split('#')[1].split('='); 
insightfilter.shift(); 

if (insightfilter == 'internet') { 
    $.get("/insights-category-divs/internet-articles-tab", function(data) { 
    $("#insights-div-articles").html(data); 

    $('.-categories a').removeClass('-active'); 
    $('#internet-insights-link-articles').addClass('-active'); 
    history.pushState("", document.title, window.location.pathname); 
    }); 
} 

});

的removeClass和addClass是設置正確的過濾器所強調的打算時，回到主頁面。如果用戶切換到主着陸頁上的其他過濾器，那麼history.pushState會從網址中刪除#whatever。

來源

2016-12-15 06:16:56 Robert

我認爲你要找的是history API。它看起來像你想加載新的內容，以及更改欄中的網址。你可以做到這一點的東西，如：

history.pushState(data, "page 2", "bar.html");

請參閱以下資源：

來源

2016-12-13 23:53:40

如何鏈接到新頁面並使用ajax加載div？

回答

相關問題