実現したいこと。
Vue.jsからphpファイルに対して、キー付で値を送信したい。
以下のページの真似をして、コードを記述したのですが、POST送信が上手くいきません。
https://qiita.com/kenta8813/items/4b2a62c50cce003a33c7
最終的には複数のinput要素のvalueをまとめてpostして、post先で$_POST['id']のような形で取得できるようにしたいです。
元々のソースの状態だと、PARAMボックスに何を入力しても$_POSTが空となります。
以下の修正を加えた場合、PARAMボックスにaaaを入力するとaaaをキー名としてPOSTすることができますが、valueは空となります。
axios.post(this.url,param,config) → axios.post(this.url,this.param)
param = JSON.parse(this.param) → コメントアウト
ここを乗り越える事が現在取り組んでいる学習の進捗に大きく関わるので助けていただきたいです。
js
1//ajax_test.js 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>vue ajax</title> 6 <link rel='stylesheet' href='/stylesheets/style.css' /> 7 </head> 8 <body> 9 <h1>API CALL TEST with Vue.JS</h1> 10 <div id="app"> 11 <div> 12 <p>URL</p> 13 <input type="text" id="url" v-model="url" size="60"> 14 </div> 15 <div> 16 <p>PARAM</p> 17 <input type="text" id="param" v-model="param" size="60"> 18 </div> 19 <div> 20 <button v-on:click="post">POST</button> 21 </div> 22 <div> 23 <p>RESULT</p> 24 <textarea v-model="result" cols="60" rows="10"></textarea> 25 </div> 26 </div> 27 28 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 29 <script src="https://unpkg.com/vue"></script> 30 <script src="https://unpkg.com/jquery"></script> 31 <script> 32 var app = new Vue({ 33 el:"#app", //vueのインスタンスが紐づくDOM要素ののセレクタ 34 data:{ //ここで定義した値がv-model="hoge"や{{hoge}}の初期値に反映される 35 url:"/ajax",//v-model="url"の初期値 36 param:"{}", //v-model="param"の初期値 37 result:"...." //v-model="result"の初期値 38 }, 39 methods:{//v-on:click="hoge"などのイベントに紐づく関数定義 40 post: function(){ //v-on:click="post"時の処理 41 //Axiosを使ったAJAX 42 //リクエスト時のオプションの定義 43 config = { 44 headers:{ 45 'X-Requested-With': 'XMLHttpRequest', 46 'Content-Type':'application / x-www-form-urlencoded' 47 }, 48 withCredentials:true, 49 } 50 //vueでバインドされた値はmethodの中ではthisで取得できる 51 param = JSON.parse(this.param) 52 53 //Ajaxリクエスト 54 /* 55 Axiosはプロミスベースのモジュールなので 56 .thenや.catchを使う。 57 .then((res => {}))の内側ではスコープが違うので 58 Vueでバインドされた値をthisでは取れない 59 */ 60 axios.post(this.url,param,config) 61 .then(function(res){ 62 //vueにバインドされている値を書き換えると表示に反映される 63 app.result = res.data 64 console.log(res) 65 }) 66 .catch(function(res){ 67 //vueにバインドされている値を書き換えると表示に反映される 68 app.result = res.data 69 console.log(res) 70 }) 71 } 72 } 73 }) 74 </script> 75 </body> 76</html>
php
1<?php 2//routes.php 3 4use Slim\Http\Request; 5use Slim\Http\Response; 6use Classes\Controllers\TestController; 7 8// Routes 9$app->post('/ajax', TestController::class . ':ajax'); 10
php
1<?php 2//TestController.php 3namespace Classes\Controllers; 4 5use Slim\Http\Request; 6use Slim\Http\Response; 7 8class TestController extends Controller 9{ 10 public function ajax(Request $request, Response $response) 11 { 12 var_dump($_POST); 13 } 14} 15
回答2件
あなたの回答
tips
プレビュー