.load()を使ってみた
試したソースコードです。
本体HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul id="id_ul"><li>大阪</li><li>東京</li><li>京都</li></ul><ul><li>犬</li><li>猫</li><li>猿</li></ul><p>サンプル出力。</p> |
読み込み用PHP
1 2 3 | <p><?= $_POST["name"]; ?>さんは<?= $_POST["age"]; ?>才です。</p> |
引数
.load(url, data, complete)
1 2 3 4 5 | $("[type=button]:eq(2)").on("click", function() {$( "#result" ).load( "ajax_load_test2.php", { name: "山田太郎", age: 22 }, function() {alert( "読み込みました。" );});}); |
この例の場合は、
1 2 3 | urlが→"ajax_load_test2.php"dataが→{name: "山田太郎", age: 22 }completeが→function() {alert( "読み込みました。" );}); |
url
読み込みたいファイルのパスを記述します
data
POSTの値を渡せるらしいです
complete
要求が完了したときに実行されるコールバック関数
以上これらが基本的な関数の動きになります。
============================================
============================================