axiosのPOSTをPHPでテスト

未分類

axiosの動きをPHPで確認したいために以下の記事を参考にして動くとこまで作りました。

ブラウザの時にaxiosのPOSTの値が送信されない?そんなことはない - Qiita
#はじめに最近Vue.jsをよく触るようになって、Ajax使いたいなら axios を使うといいよとVue.js公式も言っていたので使っていろいろ試していました。#POSTをしてみるさてさて、…

その他参考リンク

axiosで配列をPOSTしたら正しく送信されない
下記のようなデータがあります {"day":"2018-12-31", "asa":0, "hiru":0, "yoru":0} 実際はこれが日付違いで7つ(一週間分)あります。
axiosライブラリを使ってリクエストする - Qiita
概要deleteでの通信で割とはまったのでメモっておく。GET (参照)クエリパラメータをセットする場合は、URLに直接記述するか、第2引数にparamsというキー名でセットする。cons…
axiosの使い方まとめ (GET/POST/例外処理)
プログラミング関連の備忘録。AI関連APIの解説等を行っています。 少しでも誰かの役に立てれれば嬉しいです。

html&javascript(PHP)

sample_php2.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
</head>
<body>
  <h1>axiosのテスト</h1>

  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
  <script language="javascript" type="text/javascript">

  let params = new URLSearchParams();
  params.append('text', 'テストだよーうほうほ');

  axios.post('http://localhost/test1/sample_php1.php', params)
    .then(response => {
      console.log('送信したテキスト: ' + response.data.text);
    })
    .catch(error => {
      console.log(error);
    });

  </script>

</body>
</html>

PHP

sample_php1.php

<?php
// $_POST の値をJSONにして返す簡単なお仕事
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['text' => $_POST['text']]);

?>

 

コメント

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