重新加载网页上除一个 div 之外的所有内容

Question

我正在尝试建立一个基本的网页，它上面有一个小型音乐播放器（niftyPlayer）。我为之做这件事的人希望播放器位于页脚中，并在用户导航到网站的不同部分时继续播放歌曲。

无论如何，我可以在不使用框架的情况下做到这一点吗？有一些关于使用ajax和innerHTML更改页面部分的教程，但我在重新加载音乐播放器之外的所有内容时遇到了困难。

提前谢谢你，

--亚当

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 等网站中很常见，因为聊天等内容需要在各个页面上保持一致。老实说，您自己编写这样的程序有点困难 - 因此我建议您站在现有框架的基础上，为您完成一些腿部工作。我已成功使用具有以下模式的backbone.js：

Answer 5

您可以通过 jQuery.ajax() 和 JSON：

例如：

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>

one.php

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

two.php< /strong>

<?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]);
            }
        });
    });
});