jquery loadメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery load()メソッド

loadメソッドは、外部ファイルを読み込むメソッドです
サーバーからtextファイルやHTMLファイルを読み込んで指定した要素に読み込んだ内容を表示することができます
jqueryでajaxを使う時はutf-8以外は文字化けするので文字コードはmetaタグでutf-8にしてください。読み込むファイルもutf-8で保存してください

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

第1引数のみ指定した場合

$("セレクタ").load(読み込むファイルのurl)

textファイルを読み込んで指定した要素に読み込んだテキストを表示する

jquery

$(function() {
	$("button").click(function(){
	$("div#hoge").load("./hoge.txt");
	});
});
css
#hoge{
 border: solid 1px;
 width: 250px;
 height: 250px;
 }

html

<div id="hoge"></div>
<button>ボタン</button>

サンプル


読み込むファイル:hoge.txt

サーバーにファイルが存在するか確認する

ファイルから情報を取得できなかった場合に第3引数にコールバック関数を指定して取得したデータ、status(リクエスト結果を表す文字列)を取得して情報を表示します


第3引数には、取得したデータ、status(リクエスト結果を表す文字列)、XMLHttpRequestオブジェクトを指定できます。XMLHttpRequestオブジェクトとは、ステータスコードやレスポンスヘッダの内容を確認、xhrを直接用いた処理ができるようになります

第3引数まで指定

$("セレクタ").load(ファイルのurl,サーバへ送信するデータ,function(){
	ファイルをロードした後に実行される処理
});
返される文字列 意味
success ファイルが見つかりました
error エラー。ファイルがありません
notmodified 更新されていない
timeout 探しましたが時間オーバーしました
parsererror 構文にエラーがあります

loadメソッドで指定しているのは読み込むファイル(hoge2.txt),送信するデータ(今回は送信するデータはないのでnull)ヌルは何もないときに指定します。コールバック関数で2つの情報を取得しています。一つ目はファイルから取得できた内容、2つ目はリクエスト結果、今回はファイルがないのでerrorが帰ってきます。
if文で帰ってきた値がsuccess以外のときは、帰ってきた値を用意したテキストといっしょにspan要素に表示します
※ファイルがある場合は、ファイルの内容を表示します

jquery

$(function() {
	$("button#fuga").click(function(){
	$("div#hoge2").load("./hoge2.txt",null,function(response, status,xhr){
	if (status!= "success") {
	$("span#foo").html("ファイルが取得できませんでした: <br>"+status)
       }
	});
	});
});

html

<span id="foo"></span>
<div id="hoge2"></div>
<button id="foo2">ボタン</button>

ボタンを押すとhoge2.txtを探しにいきますがサーバーにはアップしていませんのでstatusはエラーが帰ってきます。





(C)2012 ホームページ作成無料