【Ajax】サーバーにあるファイル(データ)を指定の要素に出力する

公開日:
更新日:
カテゴリー: Ajax

Ajaxを利用してサーバーのファイルにアクセスし、そのファイル内にあるすべてのデータ(HTML)を現在表示中のページに出力する方法を説明します。

loadメソッドを使う

loadメソッドを使えばサーバーにアクセスしてデータの送受信を簡単に行えます。

$('エレメント').load('ここにファイルパス');

load関数の引数に取得したいファイルを指定すれば、そのファイルの内容を取得して指定エレメント(要素)に表示させることができます。

loadメソッドの詳細はこちらを参照して下さい。

index.html

まずindex.htmlを作成し、以下を記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>サンプルプログラム</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
        function action(){
          $('#output').load('output.html');
        }
      //-->
    </script>
  </head>

  <body>
     <p><input type="button" value="サンプルの実行" onclick="action();"></p>
     <div id="output">ここにoutput.htmlの内容が出力されます!</div>
  </body>
</html>

output.html

次にindex.htmlに読み込まれる「output.html」を作成し、以下を記述します。

<h2>output.html</h2>
<p>output.htmlの内容が出力されました。</p>

サーバーのファイル(データ)を取得して要素に出力

これら2つのファイルをサーバーにアップロードし、index.htmlにアクセスして「サンプル実行」ボタンを押せばAjaxでサーバーのファイル(output.html)を取得して出力してくれます(「output」エレメントのinnerHTMLに設定してくれる)。

実際の動作等はサンプルから確認してください。

 

あわせて読んでほしい!

 

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント