JavaScript

JavascriptでPOSTする時の方法

JavascriptでDOMを生成して送信する場合

formタグを使わずにjavascriptでPOST送信する

DOMを生成して送信
const action = '/post/'
const method = 'POST'
const data = this.$contactparam
let form = document.createElement('form');
form.setAttribute('action', action); 
form.setAttribute('method', method); // POSTリクエストもしくはGETリクエストを書く。
form.style.display = 'none'; // 画面に表示しないことを指定する
document.body.appendChild(form);
if (data !== undefined) {
  Object.keys(data).map((key)=>{
    let input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', key); //「name」は適切な名前に変更する。
    input.setAttribute('value', data[key]);
    form.appendChild(input);
  })
}
console.log(form)

axiosを利用して送信する場合

axios
axios({
  url: url,
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  data: json
}).then(res => {
    //成功時の処理
    console.log(res)
  })
  .catch(err => {
    //エラー時の処理
    console.error
  })

fetchを利用して送信する場合

fetch
const method = 'POST';
//送信先を指定
const url = '/post/' 
const headers = {
  'Content-Type': 'application/x-www-form-urlencoded'
};
// 送信データを変換
const obj = jsondata //json形式
const body = Object.keys(obj).map((key)=>key+"="+encodeURIComponent(obj[key])).join("&");

const options = { 
  method, 
  headers,
  mode: 'cors',
  body
}
fetch(url, options)
  .then(res => {
    //成功時の処理
    console.log(res)
  })
  .catch(err => {
    //エラー時の処理
    console.error
  })
}

fetchはIE,Safari未対応

fetchはIE,Safari未対応なのでpollyfillを利用する必要がある。

https://github.com/github/fetch

npmでインストール
npm install whatwg-fetch --save
javascriptファイルに読み込み
import 'whatwg-fetch'