個々のページではなくjavascriptでメインコンテンツを動的に変更したい

Question

私のウェブサイトは現在、異なるページを動的にロードするために.tplテンプレートファイルを使用しています。それは、ヘッダー、サイドバー（チャット）、メインコンテンツ、フッターなど、ページ全体を再度読み込みます。

私のindex.phpファイルには、メニューの「home」をクリックすると「home」というページがロードされるスイッチケースがあります。 （例）

しかし、私はそれを望んでいません。彼らはサイドバーのチャットでもあり、別のページをロードするeveytimeをリロード/リセットします。したがって、以前のすべてのメッセージはなくなります。だから私が望むのは、メインコンテンツ部分だけを変更することです。ヘッダー、サイドバー、フッターはそのまま残り、リロードしません。

私はjavascriptでやろうとしましたが、うまくいきませんでした... 誰かが私を助けてくれますか？

Answer 1

（そして、はい、私は... stackoverflowの上の最後の時間を検索し、Googleが、何かを見つけることができませんでしたされています）次の命令に従ってください：

1. を別々の.tplファイルを作成します。ヘッダー、フッター、サイドバー、およびコンテンツファイル用。
2. メインファイルにはヘッダー、フッター、サイドバーがあり、コンテンツ用に1つのセクションがあります。 3. ajax呼び出しを使用して、.tpl（idまたはクラスを使用して）ファイルコンテンツを置き換えます。

3. あなたのURLを関数にバインドします。以下のように

   サンプルコード：

   // sidebar.php

   <ul> 
       <li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li> 
       <li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li> 
       </ul> 
   

   // master.php

    <?php 
         include("header.php"); 
         include("sidebar.php"); 
         ?> 
         <section id="fileContent"> 
         </section> 
        <?php include("footer.php"); 
        ?> 
   <script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
       <script> 
        function changePage(obj) 
        { 
         var Filename=$(obj).data('page') 
         $.get(Filename, function(data) { 
          $("#fileContent").html(data); 
         }); 
        } 
       </script> 
   

Answer 2

何がAJAXと呼ばれている必要があります（アヤックスでは、 Webアプリケーションは、exiの表示と動作を妨げずに（バックグラウンドで）非同期的にサーバにデータを送信したりサーバから取得したりすることができます。刺さページ）

uはあなたのメインのコンテンツが含まれており、バックページにHTMLコードを挿入するSmartyテンプレートをロードするPHPファイルへのリクエストを送信するにはJavascriptを必要とAJAXを使用するには：

<?php 
//some-php-file.php 
include("Smarty.class.php"); 
$smarty = new Smarty; 
$smarty->display("main_content_part.tpl"); 
?> 

 

//link on 'home' site 
<a href="#" id="ajaxHomeBtn">Home</a> 

 

//javascript(jquery) ajax request 
$('#ajaxHomeBtn').click(function(e){ 
    e.preventDefault(); 
    $.get("some-php-file.php", function(smarty_html_data) { 
    $(".main-content").html(smarty_html_data); 
    }); 
});