saitoxu.io

AboutTwitterGitHub

JavaScriptでフォームデータを送信する

May 09, 2017

JavaScript でフォームデータを送信する方法のメモです。

FormData オブジェクトを使う

FormDataオブジェクトを使ってデータを送信します。 ファイルの送信などに重宝します。

使い方は簡単で、key-value 形式で送信するデータを詰め込むだけです。

const fb = new FormData()
fb.append('name', 'saitoxu')
fb.append('email', 'saitoxu@example.com')
view raw FormData.js hosted with ❤ by GitHub

詳しくはこちら ↓

サンプル

React/Rails で使った場合のサンプルを載せておきます。

クライアントは以下のようになります。 FormData.append()のキーをサンプルのようにすると、 通常の Rails のフォームデータ受信と同じようにデータを受け取れます。

onSubmit(e) {
e.preventDefault()
const fd = new FormData()
fd.append('user[name]', this.state.name)
fd.append('user[email]', this.state.email)
fetch('http://example.com/users', {
method: 'POST',
body: fd
}).then(response =>
response.json()
).then((json) => {
// do something
}).catch(err =>
console.log(err)
)
}
view raw Client.js hosted with ❤ by GitHub

サーバサイドはこんな感じです。 通常の Rails と変わったところはないですね。

class UsersController < ApplicationController
def create
user = User.new(user_params)
if user.save
render json: { status: 'success' }
else
render json: { status: 'failure' }
end
end
private
def user_params
params.require(:user).permit(:name, :email)
end
end
view raw users_controller.rb hosted with ❤ by GitHub


© 2020, Yosuke Saito