jQueryでのajaxの使い方をまとめていく

本記事では、jQueryのajaxの使い方をまとめていく。

基本的には使い方

jQueryのajaxは、基本的には以下の様な使い方をする。

$.ajax("/sample", {
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(json_data),
    headers: [

    ]
}).done(function(data){
    console.log()
}).fail(function(){

})

以下は、それぞれの引数について解説する。

contentType

HTTP HeaderのContent-Typeを指定する。デフォルトでは、application/x-www-form-urlencodedが 指定される。これは、フォームで送信した時と同じ挙動をする。

例えば、jsonで送りたい場合はapplication/jsonを指定し、画像を送りたい場合はmultipart/form-dataを指定するのが望ましい。

dataType

サーバーから送られてくるデータ型を指定する。この値は多くの場合はjsonを指定することになる。

data

サーバーに送るデータを指定する。jsonで送る場合には、JSON.stringifyを使うこと。

headers

HTTP Headerを追加、指定ができる。この引数を使う目的の多くは、CSRFトークンを指定する場合になる。

Ajaxで画像やファイルを送りたい場合

Ajaxで画像やファイルを送りたい場合には、以下の事を行うと良い。

• $("#file").get(0).files[0]でファイルの中身を取得
• FormDataオブジェクトで送信するデータを作成
• contentTypeをmultipart/form-dataに設定する

例としては、以下の様なコードを書くと良い。

var image = $("#img_input").get(0).files[0]
var title = $("#title").get(0).files[0]

var form_data = new FormData()
form_data.append("image", image)
form_data.append("title", title)

$.ajax("/sample", {
    contentType: "multipart/form-data",
    dataType: "json",
    data: form_data,
}).done(function(data){
    console.log(data)
}).fail(function(){
    console.log("failed")
})

上記の例では、バックエンド側では$request->input('title')とか$request->file("image")->get() の様に値を取り出すことができる。