jQueryを使用したAjax通信

Ajax通信でハマったのでメモ。
ちなみにrailsなら :remote => true にしておけばjsにajax処理書かなくても問題ない。
(その代わり.js.erbが必要か。)
他の言語でもやることを想定してメモしておく。

通信方法

ボタン押した時にAjaxでデータ取ってくるみたいなことをする。

$(function(){
  
  // ボタン押下時の処理
  $("#btn").on("click", function(e){
    // フォームSubmit防止。SubmitしてしまうとAjax通信がキャンセルされる
    e.preventDefault();
    $.ajax({
      type: 'GET',
      url:'ajax',
      dataType: 'json'
    })
    // Ajax成功時の処理
    .done(function( data, textStatus, xhr) {
      alert(data);
    })
    // Ajax失敗時の処理
    .fail(function(xhr, textStatus, errorThrown ) {
      alert(xhr.status + " " + textStatus);
    });
  });
  
});

サーバー側

  # ----------------- 
  # Ajaxのテスト
  # ----------------- 
  def ajax
    @data = {"test" => 1}
    render json: @data, status: 200
  end

注意したいのが以下の点。

• e.preventDefault()をつけないと、サーバー側へ同期通信が走り、Ajaxがキャンセルされてしまい、status == 0でfailに飛ぶ。
• jsonデータを返却する場合、parseできる形でないと、ステータス200でもfailに飛ばされる。