Question

我正在网站上使用AJAX，而我正在制作一些页面来加载某个div：“pageContent”。现在我有另一个内容，我想在另一个div上打开：“复制器”。我想在'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>

<子>的script.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!';
?>

我忘了提到：我的'pages'内容位于名为'pages'的文件夹中，而我的'play'内容则位于另一个名为'plays'的文件夹中。谢谢你的帮助！

Answer 1

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

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

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

Answer 2

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

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

正如Asad建议的那样，您也可以使用jQuery加载并使用上面的一些代码将相关网址传递给它

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');
    }
}

Answer 3

如果我理解，您有两组链接（用于页面和播放列表），每个链接都要加载到不同的容器中。以下是您可以尝试的内容：主要是我消除了全局变量并将当前哈希放在每个容器的data中，并将两组链接的管理分开。

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

我记得你在使用当前页面网址的哈希值做的事情，你仍然可以在loadPage函数内的ajax成功中设置它。

这是一个有效的sfiddle示例，其中包含一些控制台调用（打开浏览器的控制台），但没有调用ajax。

更新：

我更新了代码，因此您可以管理动态添加的链接（通过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');
            }
        }   
    });
}

检查并评论这是否是您所需要的，或者我有错误：）

AJAX：在另一个div中打开内容

3 个答案: