Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

基本的に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');
    }
});
masash49
フロントエンドエンジニアとして働き出しました。 わからない事、調べた事、試した事を書いていきます。 https://github.com/masashi49 https://twitter.com/YMD22226133?s=09 主に調べること https://gyazo.com/7991302d40ea08944caae9c264665593
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした