[jQuery] Ajaxでデータを取得する – コピペで使える JavaScript逆引きリファレンス

Ajaxでデータを取得するサンプルです。

サンプルソース

例）ボタンを押すとAjax通信を行い、結果をコンソールに出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){

    //Ajaxに渡すデータ
    var dt = {a:1, b:2};  //このサンプルでは関係ありません。

    //Ajax通信を行う
    $.ajax({
        url:"test.txt",
        type:"POST",
        dataType:"json",
        data:dt
    })
    .done((data) => {
      //成功した場合の処理
      console.log(data);
    })
    .fail((data) => {
      //失敗した場合の処理
      console.log(data.responseText);  //レスポンス文字列を表示
    })
    .always((data) => {
      //成功・失敗どちらでも行う処理
      console.log(data);
    });
  });

});
</script>
</head>
<body>
<input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ajaxサンプル</title>

$(function(){

$('#btn1').click(function(){

//Ajaxに渡すデータ

var dt = {a:1, b:2}; //このサンプルでは関係ありません。

//Ajax通信を行う

$.ajax({

url:"test.txt",

type:"POST",

dataType:"json",

data:dt

})

.done((data) => {

//成功した場合の処理

console.log(data);

})

.fail((data) => {

//失敗した場合の処理

console.log(data.responseText); //レスポンス文字列を表示

})

.always((data) => {

//成功・失敗どちらでも行う処理

console.log(data);

});

</script>

</head>

<body>

</body>

</html>

（test.txt）: この文字列が返ります。

（結果）: この文字列が返ります。

ここでは固定のテキスト文字列をそのまま受け取っていますが、通常はphpやサーブレット等にAjax通信を行って処理結果を受け取ります。

$.ajaxのパラメータ

Ajax通信を行う時の振る舞いやデータを指定します。

【$.ajaxに渡すパラメータ】
url	リクエストの送信先URL
type	HTTP通信の種類を指定する（"POST" or "GET"）※デフォルト値は"GET"です。
dataType	サーバから返るデータ形式　省略時はMIMEタイプ等から自動判別される。（"text" "json" "jsonp" "xml" "html" "script"）
data	サーバに送信する値オブジェクトでも文字列でもOKです。
username	認証が必要な時に使用するID
password	認証が必要な時に使用するパスワード
contentType	サーバ送信時のcontent-typeヘッダ。未指定時は"application/x-www-form-urlencoded"。通常は特に指定する必要はない。
async	非同期通信とするかどうか（true：非同期通信（デフォルト）　false：同期通信）
cache	通信結果をキャッシュするかどうか（true：キャッシュする　false：キャッシュしない）
timeout	タイムアウト時間を指定する（ミリ秒）

$.ajaxのコールバック関数

Ajaxから結果が戻ると、状況に合わせたコールバック関数が呼び出されます。

【コールバック関数】
beforeSend	Ajax通信が行われる直前に呼ばれる ※falseを返すとAjax通信がキャンセルされる
success	Ajax通信が成功した時に呼ばれる　※非推奨（引数に渡される値）　第１引数：サーバが返した値　第２引数：通信内容文字列 "success", "error", "timeout", "notmodified", "abort", "parsererror" 　第３引数：jqXHRオブジェクト
error	Ajax通信でエラーが発生した時に呼ばれる　※非推奨（引数に渡される値）　第１引数：XMLHttpRequestオブジェクト　第２引数：エラー内容文字列 "error", "notmodified", "parsererror", "timeout" 　第３引数：補足的な例外オブジェクト
complete	Ajax通信が完了した時に呼ばれる（success/errorの後）　※非推奨（引数に渡される値）　第１引数：XMLHttpRequestオブジェクト　第２引数：エラー内容文字列 "success", "error", "timeout", "notmodified", "abort", "parsererror"

success, error, completeは非推奨です。
代わりに上記サンプルのように.done .fail .alwaysを使用してください。

解説

コールバック関数に渡されるオブジェクトには多くの情報が入っています。中身を確認したい時は、console.logで出力すると簡単に確認できます。
通信結果がエラーとなってしまう場合は、以下ページを参考にしてみてください。
[JavaScript] Ajaxの戻りステータスがエラーとなる場合の原因