jQuery
Ajax

構文

• var jqXHR = $ .ajax（url [、settings]）
• var jqXHR = $ .ajax（[settings]）
• jqXHR.done（function（data、textStatus、jqXHR）{}）;
• jqXHR.fail（function（jqXHR、textStatus、errorThrown）{}）;
• jqXHR.always（function（jqXHR）{}）;

パラメーター

備考

$ .ajax（）によるHTTPレスポンスコードの処理

要求が成功したかどうかに基づいてトリガされる.done 、 .fail 、および.always promiseコールバックに加えて、特定のHTTPステータスコードがサーバーから返されたときに関数をトリガするオプションがあります。これは、 statusCodeパラメーターを使用して行うことができます。

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

jQueryの公式ドキュメントでは次のように述べています。

要求が成功すると、ステータスコード関数は成功コールバックと同じパラメータを取ります。エラー（3xxリダイレクトを含む）が発生した場合、 errorコールバックと同じパラメータが使用されます。

Ajaxを使用してフォームを送信する

場合によってはフォームがあり、ajaxを使用してフォームを送信したいことがあります。

この単純な形式があるとします。

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

次のjQueryコードを使用することができます（ $(document).ready呼び出し内） -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

説明

• var $form = $(this) - 再利用のためにキャッシュされたフォーム
• $('#ajax_form').submit(function(event){ - ID "ajax_form"のフォームが送信されると、この関数を実行し、そのイベントをパラメータとして渡します。
• event.preventDefault(); - フォームが正常に送信されないようにする（あるいは、同じ結果をもたらすajax({});ステートメントの後にreturn falseをreturn falseこともできます）
• url: $form.attr('action'), - フォームの "action"属性の値を取得し、それを "url"プロパティに使用します。
• data: $form.serialize(), - フォーム内の入力を、サーバーへの送信に適した文字列に変換します。この場合、 "name=Bob&[email protected]"のようなものが返されます。

JSONデータの送信

jQueryはjSON レスポンスの処理に苦労しますが、リクエストでJSON形式でデータを送信したい場合は、もう少し作業が必要です。

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

送信するデータに正しいcontentTypeを指定していることを確認してください。これは一般的な良い習慣であり、あなたが投稿しているAPIが要求するかもしれませんが、 contentTypeが%20から+へのデフォルトの変換を行わないようにjQueryに指示するという副作用もありcontentType application/x-www-form-urlencodedのデフォルト値のままにします。なんらかの理由でcontentTypeをデフォルトのままにしなければならない場合は、 processDataをfalseに設定して、これをprocessDataてください。

JSON.stringifyへの呼び出しはここでは避けることができますが、これを使用すると、JavaScriptオブジェクトの形式でデータを提供できます（したがって、プロパティ名の引用に失敗するなどのJSON構文エラーが発生することはありません）。

オールインワンの例

Ajax Get：

解決策1：

$.get('url.html', function(data){
    $('#update-box').html(data);
});

解決策2：

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

Ajax Load：シンプルさのために作成された別のajax getメソッド

$('#update-box').load('url.html');

.loadは追加のデータで呼び出すこともできます。データ部分は、文字列またはオブジェクトとして提供することができます。

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

コールバックメソッドで.loadが呼び出された場合、サーバーへのリクエストはポストになります

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

Ajax投稿：

解決策1：

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

解決策2：

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

Ajax Post JSON：

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

Ajax JSONを入手する：

解決策1：

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

解決策2：

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

Ajaxコールまたはリクエストを中止する

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//リクエストを強制終了する

xhr.abort()

Ajaxファイルのアップロード

1.単純な完全な例

このサンプルコードを使用して、新しいファイル選択が行われるたびにユーザーが選択したファイルをアップロードできます。

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

今度はこれを分解し、部分的に調べてみましょう。

2.ファイル入力の操作

このMDNドキュメント（Webアプリケーションからのファイルの使用）は、ファイル入力の処理方法に関するさまざまな方法についてよく読んでいます。これらのメソッドのいくつかは、この例でも使用されます。

ファイルをアップロードする前に、アップロードするファイルを選択する方法をユーザーに提供する必要があります。この目的のために、 file inputを使用しfile input 。 multipleプロパティでmultipleファイルを選択できます。ユーザーが一度に1つのファイルを選択するようにするには、複数のファイルを削除できます。

<input type="file" id="file-input" multiple>

入力のchange eventを使用してファイルをキャプチャします。

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

ハンドラ関数の内部では、入力ファイルのプロパティを使用してファイルにアクセスします。これはオブジェクトのような配列であるFileListを与えます。

3. FormDataの作成と埋め込み

AjaxでファイルをアップロードするためにFormDataを使用します 。

var fdata = new FormData();

前のステップで取得したFileListはオブジェクトのような配列で、 forループ 、 for ... forループ 、 jQuery.eachなどのさまざまなメソッドを使用して反復処理できます。この例では、jQueryを使用します。

$.each(files, function(i, file) {
  //...
});

FormDataのappendメソッドを使用して、フォームデータにファイルを追加します。

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

同じ方法で送信する他のデータも追加できます。ユーザーから受け取った個人情報をファイルとともに送信したいとします。これをフォームデータオブジェクトに追加することができます。

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. Ajaxでファイルを送信する

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

processDataプロパティとcontentTypeプロパティをfalse設定しfalse 。これは、ファイルがサーバーに送信され、サーバーによって正しく処理されるように行われます。