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

公開日：2014/05/10

更新日：2014/05/03

カテゴリー: 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に設定してくれる）。

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

あわせて読んでほしい！

Follow @ysklog_net 　

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

コメントフォーム

loadメソッドを使う

index.html

output.html

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

関連してそうなオススメ記事

コメント