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>
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」コンテンツがあり、「plays」という名前の別のフォルダに「play」コンテンツがあります。ご協力いただきありがとうございます！

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

私が理解しているのであれば、リンクの2つのグループ（ページとプレイリスト用）があり、それぞれが異なるコンテナーにロードされます。これがあなたが試すことができるものです：主に私はグローバル変数を排除し、現在のハッシュを各コンテナのデータ内に置き、リンクの2つのグループの管理を分離しました。

load_play.phpこのコードでは、別のファイルがあると思いました。そうでない場合は、両方の種類のリンクに同じページを使用できますが、とマージloadPlayし、 ajaxパラメーターをからにloadPage変更loadPage(newHash)して変更し、PHPページでサーバー側で対応する変更を行う必要があります。2種類のコンテンツを管理するために、2つの別々のPHPファイルを作成することをお勧めします。loadPage(newHash, linkType)'page='+newHash'number='+newHash+'&type='+linkType

現在のページのURLのハッシュを使用して何かを行っている場合でも、関数内でajaxの成功に設定できloadPageます。

これは、いくつかのコンソール呼び出し（ブラウザーのコンソールを開く）を使用したが、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 に答える