javascriptのFormDataは、ajaxで飛ばすまで中身を見ることができないっぽい。

javascriptのメソッド、FormDataを使った時に
値が入らない？？？となって困ったのでシェアします。

結果的には入っていました。

messages.js

  $('.message_form').on('submit', function(e) {
    e.preventDefault();
    var group_id = $('.group_id').val();

    var fd = new FormData($('.message_form').get(0))
    fd.append('body', $('.form').val())
    // $('.form').val() => "aaa"
    console.log(fd);
    // ここではfdを見ると FormData = {} となり、一見何も入っていないように見える
    $.ajax({
      type: 'POST',
      url: '/groups/' + group_id + '/messages.json',
      data: fd,
      processData: false,
      contentType: false,
      dataType: 'json'
    })
    .done(function(data) {
      console.log(data.body);
      // => "aaa"
      // なのに、ここで見るとfd.appendの部分で入れたbodyを見ることができる。
      data.name = $('.current_user_name').val();
      $('div.right__content').append(build_message(data));
      textField.val('');
    })
    .fail(function(data) {
      alert('送信に失敗しました。');
    });
  });