Javascript

application/jsonとapplication/x-www-form-urlencodedをaxiosでpost送信する方法

applicationjson、applicationx-www-form-urlencoded画像

postでapiを叩いてデータを送信するときは、画像などを除き、content typeに設定するのは、大体「application/json」か「application/x-www-form-urlencoded」になると思います。この2つの違いや、送信方法についてまとめようと思います。

「application/json」と「application/x-www-form-urlencoded」の違い

application/json

jsonフォーマットでデータが送受信されます。
例えば、{“a”:1,”b”:2} のような形です。

application/x-www-form-urlencoded

エンコードされたurlでデータが送受信されます。
a=1&b=1 のようなデータを送信する場合は、「%20a%3D1%26b%3D1」のようにエンコードされて送信されます。

「application/json」と「application/x-www-form-urlencoded」の送信方法

「application/json」でpost送信する場合

application/jsonでPOSTする場合は、axios.postの第2引数に、送信するデータをオブジェクトで指定します。

const res = await axios.post('/jojo', {
    user_id: 1,
    user_name: 'kujyo jyoutarou'
},
{
    headers: {
        content-type: 'application/json',
})

「application/x-www-form-urlencoded」でpost送信する場合

application/x-www-form-urlencodedでPOSTする場合は、URLSearchParamsを使います。

const params = new URLSearchParams()
params.append('user_id',1)
params.append('user_name', 'kujyo jyoutarou')
const res = await axios.post('/jojo', params)

以上です。
今回は、application/jsonとapplication/x-www-form-urlencodedをaxiosでpost送信する方法についてまとめてみました。

-Javascript
-,