axios.jsライブラリの使い方(post)

axios.jsライブラリの使い方(post)

axios.jsで前回getしてみました。※axios.jsライブラリの使い方(get)

今回はjsonデータをpostしてみます。

postする際のヘッダは、Content-Type:application/x-www-form-urlencodedになりますが、URLSearchParamsクラスを使用すればそのままJSONデータをpostすることができますと公式サイトに書いています。オレオレ翻訳してます。

URLSearchParamsは未対応のブラウザがあると思いますがChromeでは動作します。(Chrome49から対応しています)

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>axiosjs</title>
</head>
<body>
<script>
var params = new URLSearchParams();
params.append('id', 100);
params.append('name', 'takahashi');
axios.post("https://uperworld.com/axiosjs/post01.php", params)
.then(ret => alert(ret.data));
</script>
</body>
</html>

view raw
index.html
hosted with ❤ by GitHub

post先のphpは以下です。

<?php
$json_string = file_get_contents('php://input');
echo $json_string;
$obj = json_decode($json_string);
return $obj;
?>

view raw
post01.php
hosted with ❤ by GitHub

良きに動いてくれます。

デモ

axios

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA