0

我在一个网站上使用 AJAX，我目前正在制作一些页面以加载到某个 div：“pageContent”。现在我要在另一个 div 上打开另一个内容：“reproductor”。我想在“pageContent”div 中打开“page”，在“reproductor”div 中打开“play”。我不知道如何修改我的 script.js 和 load_page.php 文件以使其正常工作。这是我得到的：

HTML： 
<script type="text/javascript" src="js/script.js"></script>
<a href="#page1">PAGE</a>
<a href="#play1">PLAY</a>
<div id ="pageContent"></div>
<div id="reproductor"></div>
脚本.js： 
var default_content="";
$(document).ready(function(){

    checkURL();
    $('ul li a').click(function (e){
        checkURL(this.hash);
    });

    default_content = $('#pageContent').html();
    setInterval("checkURL()",250);

});

var lasturl="";
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;

    if(hash != lasturl)
    {
        lasturl=hash;
        if(hash=="")
            $('#pageContent').html(default_content);
        else
        loadPage(hash);
    }
}

function loadPage(url)
{
    url=url.replace('#page','');
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}
load_page.php： 
<?php

if(!$_POST['page']) die("0");

$page = (int)$_POST['page'];

if(file_exists('pages/page_'.$page.'.html'))
    echo file_get_contents('pages/page_'.$page.'.html');
else 
    echo 'There is no such page!';
?>

我忘了提一下：我的“页面”内容在一个名为“页面”的文件夹中，我的“播放”内容在另一个名为“播放”的文件夹中。谢谢你的帮助！

4

3 回答 3

2

从提供 HTML 的资源中加载内容到元素中的最简单方法是使用load：

$('#reproductor').load('public_html/plays/play_1.html', function(){
    //stuff to do after load goes here
});

您也可以将此技术应用于您尝试将内容加载到的其他 div。

于 2012-12-15T20:51:41.793 回答
1

以下不是理想解决方案的原因有很多。最明显的是安全性——通过在单击链接之前修改链接的 href 属性，用户当然可以让您的服务器在您的服务器上提供任何 html。

编辑我已经删除了我原来的答案，因为我不能推荐它的用法。

正如 Asad 所建议的，您还可以使用 jQuery 加载并使用上面的一些代码将相关的 url 传递给它

function loadPage(url)
{
    // remove the hash in url
    url=url.replace('#','');
    // extract page or play - only works for four letter words
    var contentType=url.substr(0,4);
    // extract the number
    var contentId=url.substr(4);
    if ( $contentType == "page") {
        $("#pageContent #loading").css('visibility','visible');
        $("#pageContent").load($contentType+'s/'+$contentType+'_'+$contentId+'.html');
        $("#pageContent #loading").css('visibility','hidden');
    } else if ( $contentType == "play") {
        $("#reporductor #loading").css('visibility','visible');
        $("#reproductor").load($contentType+'s/'+$contentType+'_'+$contentId+'.html');
        $("#reporductor #loading").css('visibility','hidden');
    }
}
于 2012-12-15T21:16:37.197 回答
1

如果我理解，您有两组链接（用于页面和播放列表），每组链接都将加载到不同的容器中。这里可以试试：主要是我去掉了全局变量，把当前的hash放到了每个容器的data里面，把两组link的管理分开了。

在这段代码中，我假设你有一个单独的load_play.php文件。如果不是，那么您可以对这两种链接使用相同的页面，但是您必须将 ajax 参数合并loadPlay、loadPage更改loadPage(newHash)为loadPage(newHash, linkType)并将 ajax 参数从更改'page='+newHash为'number='+newHash+'&type='+linkType，并在您的 PHP 页面中进行相应的服务器端更改。我建议您创建两个单独的 PHP 文件以管理这两种类型的内容。

我记得你在哪里对当前页面的 url 的哈希做一些事情，你仍然可以在loadPage函数内部的 ajax 的成功中设置它。

这是一个带有一些控制台调用（打开浏览器的控制台）但没有 ajax 调用的工作sfiddle示例。

更新：

我更新了代码，因此您可以管理动态添加的链接（通过 AJAX 加载的新内容），并修复了带有哈希的 url 管理，由于新代码而被破坏。 

<div id="#page">
    <a href="#page1" class="pageLink">PAGE 1</a>
    <a href="#page2" class="pageLink">PAGE 2</a>
    <a href="#play1" class="playLink">PLAY 1</a>
    <a href="#play2" class="playLink">PLAY 2</a>
    <a href="#play3" class="playLink">PLAY 3</a>
    <div id ="pageContent"></div>
    <div id="reproductor"></div>
</div>

这是javascript： 

$(document).ready(function(){
    $('#pageContent').data('currentPage', '');
    $('#reproductor').data('currentPlay', '');

    //This will allow it to work even on dynamically created links
    $('#page').on('click', '.pageLink', function (e){
        loadPage(this.hash);
    });

    $('#page').on('click', '.playLink', function (e){
        loadPlay(this.hash);
    });

    //And this is for managing the urls with hashes (for markers)
    var urlLocation = location.hash;
    if(urlLocation.indexOf("#page") > -1){
        $('.pageLink[href='+ urlLocation +']').trigger('click')
    }

});

function loadPage(newHash)
{
    //This is the current Page
    var curHash = $('#pageContent').data('currentPage');
    //and this is the new one
    newHash = newHash.replace('#page', '');

    if(curHash===newHash){
        //If already loaded: do nothing 
        return
    }

    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+newHash,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg).data('currentPage',newHash);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}

function loadPlay(newHash)
{//Similar to loadPage...
    var curHash = $('#reproductor').data('currentPlay');
    newHash = newHash.replace('#play', '');

    if(curHash===newHash){return}

    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_play.php",
        data: 'play='+newHash,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#reproductor').html(msg).data('currentPlay',newHash);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}

如果这是您需要的，请检查并评论，或者我有什么问题:)

于 2012-12-21T00:58:00.300 回答