.load()を使ってみた
試したソースコードです。
本体HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ajax</title>
</head>
<body>
<h1>.load()</h1>
<input type="button" value="サンプル1">
<input type="button" value="サンプル2">
<input type="button" value="サンプル3">
<div id="result"></div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
// htmlを全て読み込む
$("[type=button]:eq(0)").on("click", function() {
$( "#result" ).load( "ajax_load_test1.html", function() {
$("#id_ul").css("color", "#1e80ff"); // cssで文字色をつける
});
});
// htmlの#sampleとpタグのみを読み込む
$("[type=button]:eq(1)").on("click", function() {
$( "#result" ).load( "ajax_load_test1.html #id_ul, p", function() {
$("#id_ul").css("color", "red");
});
});
// POST送信もできる
$("[type=button]:eq(2)").on("click", function() {
$( "#result" ).load( "ajax_load_test2.php", { name: "山田太郎", age: 22 }, function() {
alert( "読み込みました。" );
});
});
});
</script>
</body>
</html>
読み込み用HTML
<ul id="id_ul"> <li>大阪</li> <li>東京</li> <li>京都</li> </ul> <ul> <li>犬</li> <li>猫</li> <li>猿</li> </ul> <p>サンプル出力。</p>
読み込み用PHP
<p> <?= $_POST["name"]; ?>さんは<?= $_POST["age"]; ?>才です。 </p>
引数
.load(url, data, complete)
$("[type=button]:eq(2)").on("click", function() {
$( "#result" ).load( "ajax_load_test2.php", { name: "山田太郎", age: 22 }, function() {
alert( "読み込みました。" );
});
});
この例の場合は、
urlが→"ajax_load_test2.php"
dataが→{name: "山田太郎", age: 22 }
completeが→function() {alert( "読み込みました。" );});
url
読み込みたいファイルのパスを記述します
data
POSTの値を渡せるらしいです
complete
要求が完了したときに実行されるコールバック関数
以上これらが基本的な関数の動きになります。
============================================
============================================
