IT

ajaxの基礎「.get() .post() .load()」.load()の使い方 Part4

.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

要求が完了したときに実行されるコールバック関数

以上これらが基本的な関数の動きになります。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*