jQuery_ファイル読み込み
ファイル読み込み
jQueryでは、セレクタ（操作したい要素）を指定して、当該箇所に読み込んだファイル内容を出力します。
以下では、下記HTMLの「id=contents」にテキスト内容を出力します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
load()
load()関数は、指定したセレクタに読み込んだファイル内容を出力します。
第二引数に読み込み完了時に実行されるコールバックを指定できますが、細かい操作をする場合にはget()などを用いることが一般的です。
$(function(){
$("#contents").load("text.txt");
});
get()
読み込み完了時コールバック
get()関数の第二引数には、読み込みが完了した時に呼ばれるコールバックを指定します。
function callBack(data) {
$("#contents").text(data);
}
$(function() {
$.get("text.txt", callBack);
});
エラーハンドリング
get()関数では、doneやfailのコールバックを指定できます。
ファイル読み込みエラーなどの処理を記述することが可能です。
$(function() {
$.get("text.txt")
.done(function(data, status, jqxhr){
// 成功の場合処理
$("#contents").append("<p>" + data + "</p>");
$("#contents").append("<p>" + status + "</p>");
console.log(jqxhr)
}).fail(function(jqxhr, status, error){
// エラー時の処理
$("#contents").append("<p>" + status + "</p>");
$("#contents").append("<p>" + error + "</p>");
console.log(jqxhr)
});
});
post()
post()関数は、ローカルファイルを読み込む場合にはget()と同じです。
get()とpost()は、URL指定してGE/POSTメソッドを利用する場合に機能差がでます。
$(function() {
function doneCallBack(data, status, xhr) {
$("#contents").append("<p>" + data + "</p>");
$("#contents").append("<p>" + status + "</p>");
console.log(xhr)
}
function failCallBack(jqxhr, status, error) {
$("#contents").append("<p>" + jqxhr + "</p>");
$("#contents").append("<p>" + status + "</p>");
$("#contents").append("<p>" + error + "</p>");
console.log(jqxhr)
}
$(function() {
$.post("text.txt")
.done(doneCallBack)
.fail(failCallBack);
});
});
ajax()
$.ajax() はurlを非同期に読み込みます。
基本的にはローカルファイルの読み込みではなく、主にサーバに対して要求を投げる場合に用いる関数です。
成功時にはdone()、失敗時にはfail()を実行します。
alwaysは例外処理におけるfinallyと同じであり、ファイル読み込みが完了したら必ず実行されます。
$.ajax({
url: "text.txt"
}).done(function(data, status, xhr) {
// 通信成功時の処理
$("#contents").append("<p>" + status + "</p>");
$("#contents").append("<p>" + data + "</p>");
console.log(xhr)
}).fail(function(xhr, status, error) {
// 通信失敗時の処理
$("#contents").append("<p>" + status + "</p>");
$("#contents").append("<p>" + error + "</p>");
console.log(xhr)
}).always(function(arg1, status, arg2) {
// 通信完了時の処理
$("#contents").append("<p>" + status + "</p>");
$("#contents").append("<p>" + arg1 + "</p>");
console.log(arg2)
});
getJSON()
JSONファイルを読み込む専用関数が用意されています。
ただし、注意点としてはJSONファイルにシンタックスエラーがあったら何ら表示もなく失敗します。
$(function() {
$.getJSON("sample.json", function(data) {
// 取得したJSONデータを配列に格納する。
var items = [];
$.each(data, function(key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
});
//
$("<ul/>",{
html: items.join("")
}).appendTo( "body" );
});
});
エラーハンドリング
jQuery1.6以降であれば、done()、fail()、always()が適用可能です。
$.getJSON("sample.json")
.done(function(json) {
console.log("成功");
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("エラー：" + textStatus);
console.log("テキスト：" + jqXHR.responseText);
})
.always(function() {
console.log("完了");
});