17
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-08

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

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

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

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

###画像を送信する時
contentTypeprocessDataは必ず設置。


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の中から何かを省くということができない。
1つでも省きたい時は1つづつ送る必要がある。

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');
    }
});
17
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?