@ PHP

load()

Webページにテキストを挿入する

load() は、html() とよく似た機能を持つメソッドです。html() は引数に変更したい HTML を指定すると、セレクタで指定した要素の HTML を更新できました。load() は引数に指定したファイルを読み込み、セレクタで指定した要素内のテキストを書き換えます。

ajax_load.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="trigger">Click me!</p>
  <div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function () {
    $("div").load("sample_load.txt")
  })
});
</script>
</body>

</html>

sample_load.txt

sample.txt のテキストです。

demo

外部の HTML を表示する

外部の HTML ファイルの内容を取得・表示したい場合も load() を使います。

ajax_load_html.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="trigger">Click me!</p>
  <div><p>変更前</p></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function () {
    $("div p").load("sample_load.html p")
  })
});
</script>
</body>

</html>

sample_load.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  <p>sample_load.html の p 要素です。</p>
</body>

</html>

demo