重新加載一個網頁上的一個div

Question

我想設置一個基本的網頁，並且它有一個小型音樂播放器（niftyPlayer）。我這樣做的人希望播放器在頁腳中，並在用戶導航到網站的其他部分時繼續播放歌曲。

無論如何，我可以做到這一點，而不使用框架？有一些關於使用ajax和innerHTML改變頁面部分的教程，但是我在包裝我的頭部時遇到了麻煩，但是要重新加載音樂播放器。

謝謝你在前進，

--Adam

Answer 1

包裹在一個div的內容，幷包裹在一個單獨的DIV的球員。將內容加載到內容div中。

你會是這樣的：

<div id='content'> 
</div> 
<div id='player'> 
</div> 

如果您使用的框架，這是很容易：$('#content').html(newContent)。

編輯：

此語法適用於jQuery和ender.js。我更喜歡恩德，但每個人都喜歡恩德。我認爲MooTools是相似的，但是我使用它之後已經有一段時間了。

代碼爲Ajax：

$.ajax({ 
    'method': 'get', 
    'url': '/newContentUrl', 
    'success': function (data) { 
     // do something with the data here 
    } 
}); 

你可能需要聲明你期待什麼類型的數據。我通常發送json，然後在瀏覽器中創建DOM元素。

編輯：

你沒有提到你的服務器/服務器端腳本語言，所以我不能給服務器端的東西任何代碼示例。大部分時間都很簡單。你只需要決定一種格式（同樣，我強烈推薦JSON，因爲它本來就是JS）。

Answer 2

我想你可以做的是有div的..一個爲你的頁腳與其中的球員和其他一切;讓我們稱之爲'容器'，當然在你的身體內。然後在該網站瀏覽，只需要點擊重新裝入容器內的頁面的內容與Ajax調用：

$('a').click(function(){ 
    var page = $(this).attr('page'); 
    // Using the href attribute will make the page reload, so just make a custom one named 'page' 
    $('#container').load(page); 
}); 

HTML

<a page="page.php">Test</a> 

，那麼你面臨不過問題是，你不會真的重新加載頁面，所以URL也不會更新;但您也可以使用一些JavaScript解決此問題，並使用井號標籤來加載容器中的特定內容。

Answer 3

使用jQuery這樣的：

<script> 
$("#generate").click(function(){ 
    $("#content").load("script.php"); 
}); 
</script> 

<div id="content">Content</div> 
<input type="submit" id="generate" value="Generate!"> 
<div id="player">...player code...</div> 

Answer 4

你在找什麼叫做「單頁界面」的格局。在像Facebook這樣的網站中，這種情況非常普遍，因爲聊天需要在各種頁面上保留。說實話，自己編寫類似的東西很難 - 所以我會建議站在現有的框架之上，爲您做一些工作。我已經使用骨幹網成功了。JS這種模式：通過jQuery.ajax()和JSON

http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

Answer 5

可以重新裝載所期望的DIV：

例如：

的index.php

<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript" src="ajax.js"></script> 

<a href='one.php' class='ajax'>Page 1</a> 
<a href='two.php' class='ajax'>Page 2</a> 

<div id='player'>Player Code</div> 
<div id='workspace'>workspace</div> 

之一。 php個

<?php 
$arr = array ("workspace" => "This is Page 1"); 
echo json_encode($arr); 
?> 

two.php

<?php 
$arr = array('workspace' => "This is Page 2"); 
echo json_encode($arr); 
?> 

ajax.js

jQuery(document).ready(function(){ 
    jQuery('.ajax').click(function(event) { 
     event.preventDefault(); 
     // load the href attribute of the link that was clicked 
     jQuery.getJSON(this.href, function(snippets) { 
      for(var id in snippets) { 
       // updated to deal with any type of HTML 
       jQuery('#' + id).html(snippets[id]); 
      } 
     }); 
    }); 
});