loadとは
- ここで説明する load とは次の語句からなるjQueryのメソッドです。
- load
- 読み: ロード
意味: 動詞として「読み込む」の意味
loadメソッドの概要
このメソッドは、非同期通信を使って サーバーにリクエストします。 これにより返ってきたレスポンス (HTMLテキスト) は、このメソッドの呼び出し元要素のコンテンツに配置されます。
なお、load() の呼び出し元に該当する要素が無かった場合には、リクエストは実行されません。
構文
サンプルを見る前に構文を確認しておきます。
- url: リクエストするページの URL を文字列で指定します。
- data: リクエスト時に 送信するキーと値のペアをオブジェクト、またはオブジェクト型で指定します。
- complete: リクエストが完了した時に実行される関数を指定します。 この関数のコールバック値は jQXHR のレスポンステキストになります。
$(Selector).load(url [, data] [, complete]);以下の構文は ver1.0 で追加されましたが、ver1.8 で廃止され、ver3.0 で削除されました。
$(Selector).load(handler);
$(Selector).load([eventData], handler);
サンプルコードと実行結果
ここでは、このページと同じディレクトリにある sql-select.php というファイルを load() で読み込んで div 要素のコンテンツとして表示します。
sql-select.php は、PHP のコードが書かれたファイルです。 これは、MySQL データベースに接続して 与えられた クエリの結果を表示するための処理が書かれています。 また、データベースには予め 「 japan 」 というテーブルを作成しており、日本の 47 都道府県のデータを登録しています。
sql-select.php のページとしての仕様は、このファイルにリクエストを掛けるときに sql というキーと クエリ文 のセットを POST することで、 データベースにアクセスして、そのクエリにたいするレスポンスを表要素の形式で返してくれます。
sql-select.php の仕様に合わせて jQuery 側の処理は、サンプルコード: script の 04 行目のコードの次の部分、
load( "./sql-select.php" , {sql : $(this).text()} )
でリクエストを掛けています。
この行の $(this).text() の this は 関数の呼び出し元の意味ですので "#idButton" のことを言っています。
つまり、ここでは、ボタンに書かれているテキストを sql というキーで送信していることになります。
サンプルコード: PHP file ( sql-select.php )
<?php
error_reporting(0);
$hostName = "サーバー名";
$dbName = "データベース名";
$charSet = "utf8";
$userName = "ユーザー名";
$passWord = "パスワード";
$sql = "";
$dataSourceName = "mysql:host={$hostName}; dbname={$dbName}; charset={$charSet}";
$sql = $_POST['sql'];
if(strlen($sql) > 0){
try{
$objPDO = new PDO($dataSourceName,$userName,$passWord,null);
if ($objPDO == null){
print '接続に失敗しました。<br>';
}
else{
print "接続に成功しました。<br>";
print("sql > ".$sql."<br>");
}
$stmt = $objPDO -> query($sql);
$columns = array();
for ($i = 0; $i < $stmt->columnCount(); $i++) {
$meta = $stmt->getColumnMeta($i);
$columns[] = $meta['name'];
}
print("<table><tr>");
for($i=0;$i<count($columns);$i++){
print("<th>{$columns[$i]}</th>");
}
while($result = $stmt -> fetch(PDO::FETCH_BOTH)){
print("<tr>");
for($i=0;$i<count($columns);$i++){
print("<td>{$result[$columns[$i]]}</td>");
}
print("</tr>");
}
print("</table>");
}
catch(PDOException $e){
print("接続に失敗しました。<br>");
print("sql > ".$sql."<br>");
die();
}
finally{
$objPDO = null;
}
}
?>
- 10: $sql = $_POST['sql']; (この $_POST['sql'] の部分で ボタン に書かれた クエリ を受信しています。)
- その他の説明 (このコードは PHP のPDO オブジェクトを使ってデータベースに接続し、クエリーのレスポンスを表示するものです。PHPコード の細かな説明については、このページでは割愛させていただきます。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="idButton"> SELECT * FROM japan LIMIT 0, 5; </button>
<div id="idResult"> Result ( 結果 ) </div>
<script>...</script>
</body>
- 06: button id="idButton" (ボタン要素です。このボタンがクリックされるとボタンに書かれているクエリを指定の PHP ページに送信します。)
- 07: div id="idResult" (コンテナー要素です。レスポンスの結果を表示するために使います。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$(this).after(" <output> Please wait... </output>");
$("#idResult").load("./sql-select.php", {sql : $(this).text()}, function(response, status, xhr){
$("#idButton").next("output").text(status);
});
});
</script>
- 02-07: $("#idButton").click(function(){処理} (注釈)
- 04-06: $("#idResult").load(url, data, function(jqXHR){処理} (ここでは、load() で 同じディレクトリにある sql-select.php を呼び出しています。 この行にある {sql : $(this).text()} の部分が PHP コードの 10 行目 にある $_POST['sql' にデータを送っています。