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

我想你可以做的就是为了你的页脚，其中一个是玩家，另一个是其他的;我们称之为'容器'，当然在你体内。然后在网站中导航时，只需点击即可通过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来解决这个问题，并使用hashtags来加载容器中的特定内容。

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成功使用了这种模式：

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

Answer 5

您可以通过jQuery.ajax()和JSON重新加载所需的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>

<强> one.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]);
            }
        });
    });
});

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

5 个答案: