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("完了");
});


関連ページ



スポンサード リンク