axios.jsライブラリの使い方（post）

2019.05.28

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

コメント

タイトルとURLをコピーしました