読み込みをせずに1ページから別のページへ移動する

21025 ワード
webdev css javascript html テキストリンク
こんにちは皆さん、今日、我々は新しいチュートリアルで会います.ページをロードすることなく、1ページから別のページへ移動する方法を見ます.あなたが注意している場合は、おそらくいくつかのウェブサイトでは、1つのページから別の場所にはローディングがないときに気づいている.これを行うには多かれ少なかれ重い手法があります.たとえば、PHP symfonyフレームワークを使用することができますが、正確なアーキテクチャでファイルを整理する必要があります.したがって、Webサイトが既に存在するときに実装するのがより複雑です.そういうわけで、今日、我々はAjaxを使います、そして、それを速くするために、jQuery.
重要な注意事項:すべてのファイルはPHPで実行されます.

基礎
まず、以下のアーキテクチャを提案します.

あなたはそれに従う必要はありませんが、注意深く、ファイルの場所について厳密にする必要があります.
当社のサイトはwww.site.com この例では、ローカルのWebサーバーを使用する場合は、ドメイン名、サイトのIPアドレス、またはコンピュータ上のPHPファイルの場所をこの名前に置き換えなければなりません.The index.php ファイルは我々のホームページを含みます、その一方login.php ページには接続フォームが含まれます.The src フォルダには、いくつかの他のフォルダが含まれますphp , それぞれのWebページの開始と終了が含まれます.後でこれらの2つのファイルを作成することが重要であることを後で理解するでしょう.

→ index.php私たちの索引ページは非常に簡単です、それはPHPタイトル変数を含みますearly.php 我々がそれが全部であることを望むならば、ちょっと内容を尋ねてください.インデックスページの内容は、タイトルと段落です.最後に、最後のファイルend.php 我々がそれが全部であることを望むならば、我々はちょうど内容を尋ねません.それ以外の場合は、スクリプトでページの名前を変更します.したがって、インデックスページは次のようになります.
<?php
  $title = "Index page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>I'm the title</h1>

<p>Morbi tincidunt congue diam, at vestibulum elit tempor a. 
Donec id mi malesuada, auctor ligula in, aliquam metus. 
Vestibulum in faucibus massa. Nullam luctus et diam et posuere. 
Nulla massa metus, mattis et efficitur eu, vehicula in lectus. 
Sed a sapien quis tellus rhoncus efficitur. 
Integer sed ultrices nisl, vitae aliquam tellus.</p>


<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>

→ login.phpThe login.php ページには、基本的に同じタイトルが含まれています.
<?php
  $title = "Login page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>Login</h1>

<form action="" method="post">
  <!-- Form to be completed later (optional) -->
</form>

<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>

→ early.phpあなたが前に実現したかもしれないようにearly.php ページは他の2ページの始まりです.index.php and login.php . このファイルはよく書かれたHTMLドキュメントとして起動する必要があります.我々はjQueryを含める必要があります、あなたはそれをCDNを通してそれを含むことができるか、直接あなたのサーバーまたはコンピュータでそれをホストすることができます.最後に、ヘッダーを追加できます.ファイルはIDを持つdivの先頭で終了するmain-content これには、後のページの内容が含まれます.
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- A style file that can be created after  -->
    <link rel="stylesheet" href="src/style/css/style.css" />

    <!-- We include jQuery with the Google CDN  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
    <title><?= $title ?></title>
  </head>
  <body>
    <header>
      <div>
        <a href="index.php" class="crayons-btn crayons-btn-main">index</a>
        <a href="login.php" class="crayons-btn crayons-btn-scd">Login</a>
      </div>
    </header>
    <div id="main-content">

→ end.phpこのファイルはページの終わりを含んでいますので、メインdivや本体やHTMLタグのようなタグを閉じる必要があります.Ajaxパーツを含めます.
    </div>
  </body>
  <script type="text/javascript">
  $("a").click(function(e){
    e.preventDefault();
    $.ajax({
       url : $(this).attr('href')+"?section=true",
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){
          $('#main-content').html(code_html);
       }
    });
    window.history.pushState("","", $(this).attr('href'));
  });
  </script>
</html>
Ajaxリクエストがどのように動作するかわからない場合は、このAjaxコードを展開しましょう.まず最初にスクリプトの最初の行がイベントを検出します.この場合は、関数を起動します.2行目は、AJAXリクエストと互換性がある場合、リンクをロードしないようにブラウザに指示します.次に、URLを指定してパラメータとして渡すことで、AJAXリクエストを行いますsection=true , それで、ページは完全にロードされません.ここでリクエストの種類を指定しますGET . 成功した場合、我々は新しいコンテンツを“メインコンテンツ”divのコンテンツを更新します.最後に、ページのURLを変更します.

スタイルを加える
その後、いくつかのスタイルを追加するファイルを作成できます.これはsrc then style then css ファイル名style.css . 私の場合、私のファイルは次のようになります.
#main-content{
    width: 1000px;
    max-width: 95%;
    display: block;
    margin: auto;
    font-family: cursive;
}

#main-content h1{
    text-align: center;
}

body{
    margin: 80px 0 0 0;
}

header{
    background: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
header div{
    width: 1000px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    margin: 13px auto;
}
.crayons-btn{
    margin: 0 5px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    outline: none;
    user-select: none;
    font-family: inherit;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
    border: 0px solid;
    overflow-wrap: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.crayons-btn-main{
    background-color: blue;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #f9fafa;
}
.crayons-btn-main:hover{
    background-color: #6b6bf1;
}
.crayons-btn-scd{
    background-color: #f1f1f1;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #363d44;
}
.crayons-btn-scd:hover{
    background-color: #dddddd;
}

結果
以下の2つのボタンのいずれかをクリックすると、最終結果が表示されます.index or login , このページは、main-content 部分、残りは動きません.

あなたが質問をするならば、このチュートリアルを楽しみました.👍
Excelの数式テーブルのインデックスから列名を取得する!
linux下mysqldumpエクスポートデータ、テーブル構造、インポートデータ