jqueryを使ってformのデータをAJAXで送る時にFormDataを使うならappendに気を配る #JavaScript

基本的にFormDataを使って一括で送信する。

var formData_ = new FormData($('#send_form').get(0));

formData_とセットで別の値を贈りたいときは、appendして加える。

formData_.append('birthday' , $('#birth_day').attr("data-birth_day"));　//YMDの8桁をname=“birthday”

画像を送信する時

contentTypeとprocessDataは必ず設置。


contentType: false,
processData: false

var args = {
    url: url,
    data: formData_,
    contentType: false,
    processData: false
};

form名は、enctype属性をつけておく。

<form enctype="multipart/form-data" method="post" id=“任意のID名” action="">

各inputは、バックエンドが作成したパラメータ名をname属性に入れておく。

<input type="text" name="バックエンドがほしいパラメータ名">

FormDataが使えない機種やブラウザがあるので、ajax通信する時は全体を囲っておく必要がある。

if (window.FormData) {
    //使える時のajax処理
}else{
    //使えない時のajax処理
}
//成功失敗の処理：共通

FromDataの注意点

基本的にFormDataを使って一括で送信する時、FormDataの中から何かを省くということができない。
１つでも省きたい時は１つづつ送る必要がある。

data: {
    name: $('#status_name').text(),                      　// 名前
    birthday: $('#birth_day').attr("data-birth_day"),      // 誕生日
    job: $('#status_job').text(),　                        // 仕事
    location: $('#status_live_no').attr("data-live_no"),   // 住まい
    avatarId: $('#chara_check').attr("data-chara_check")   // アバターID
}

Androidの注意点

アンドロイドはinput fileで画像を添付することができないのでformDataにappendする必要がある。

//クッキーを使ってwebviewを判定用JS
<script type="text/javascript" src="{{ $siteBaseUrl }}/js/lib/jquery.cookie.js"></script>

(function() {
    //クッキーを使ってwebview判別
    var isAndroidApp = ($.cookie('webview') === 'android');
    //androidならformData_にspendする
    if (isAndroidApp && (0 < imageBlob.size)) {
        formData_.append('属性name', imageBlob, 'filename.jpg');
    }
});