jQuery_Ajaxリクエスト

jQueryAjaxについて

jQuery.ajax(options)は、HTTPリクエストを使用してリモードページを読み込むメソッドです。

非同期でリクエストを発行します。

受信データタイプの指定

受信データタイプの指定は「dataType」オプションを用います。


$.ajax({
    type: 'POST',
    dataType: 'text',
    dataType: 'html',
    dataType: 'json',

タイムアウトの設定

タイムアウト時間の設定には「timeout」オプションを用います。


$.ajax({
    timeout: 10000, // 数値

同期要求

同期処理でリクエストを発行する場合には「async」オプションを用います。


$.ajax({
    async: true, // 真偽値

jQueryAjaxでGETリクエスト

トークン認証するGETリクエストを発行するサンプルです。


var url = $("#url").val();

var headers_data = {
    "Authorization": $("#token").val(),
    "Content-Type": "application/json"
};

$.ajax({
    type:"get",
    url:url,
    contentType: 'application/json',
    headers: headers_data,
    success: function(json_data) {
        console.log("Success!!");
        console.log(json_data);
    },
    error: function(json_data) {
        console.log("Error!!");
        console.log(json_data);
    },
    complete: function() {
        console.log("Complete!!");
    }
})

jQueryAjaxでPOSTリクエスト

リクエストボディにJSONデータを持たせるサンプルです。


var url = $("#url").val();
var postdata = {
    filename: $("#filename").text(),
    filedata: $("#base64data").text(),
};
var headers_data = {
    "Authorization": $("#token").val(),
    "Content-Type": "application/json"
};

$.ajax({
    type:"post",
    url:url,
    contentType: 'application/json',
    headers: headers_data,
    dataType: "json",
    data:JSON.stringify(postdata),
    error: function(xhr, textStatus, errorThrown) {
        console.log("Error!!");
        console.log(xhr);
        console.log(textStatus);
        console.log(errorThrown);
    },
    success: function(json_data) {
        console.log("Success!!");
        console.log(json_data);
    },
    complete: function() {
        console.log("Complete!!");
    }
})

結果受信の方法について

上記サンプルのようなsuccess, error, complete記法は jQuery 1.8 で非推奨となりました。

jQuery 1.8 以降では下記の様に記述します。


$.ajax({
    url: "test.php"
}).done(function(data, status, xhr) {
    // 通信成功時の処理
}).fail(function(xhr, status, error) {
    // 通信失敗時の処理
}).always(function(arg1, status, arg2) {
    // 通信完了時の処理
});