質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4107閲覧

Vue.js + axiosでのajaxにてパラムが送れない。

redux

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/15 20:44

実現したいこと。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SanQ

2020/08/16 05:16 編集

PHPファイル内のajaxメソッドの中のvar_dump($_POST)をvar_dump($request)にした結果を見せてもらえませんか? またjavascriptのファイル内で何回かconsole.log()をされていますが、結果はすべて正常に表示されていますか?
redux

2020/08/16 05:42

var_dump($request)の結果が長すぎて張り付ける事はできませんでした。 txtファイルなどにして張り付けられればよいのですが。。。 {}のまま送信した場合、resultのtextareaには、値が返りますが、 デベロッパーツールのconsoleタブには表示されません。 他の形式、{"hoge":"fuga"} aaa [aaa,bbb] では送信自体ができませんでした。 特にどこの記述が見たいなどの要望があれば切り取って貼り付けます。
SanQ

2020/08/16 08:14 編集

phpのFWは何を使われていますか?PHPのFWの一つであるLaravelではメソッド内にvar_dump($request->input('送信されたデータのキーの値'))で送信されたデータの値を確認できます。なのでもしFWを使用されているのであれば、そのFWで使われている、送信されたデータを表示する表記を使用してvar_dumpを行った結果を見せてもらえませんでしょうか? また、もしjavascriptファイル内で行ったconsole.log()がundifinedやnullすらも表示しないのであれば、console.log()以前の段階でエラーを起こしている可能性が高いです。
redux

2020/08/16 10:43

FWはslim3です。 送信されたデータを表示する表記がわからないので調べてみます。
redux

2020/08/16 11:18

色々試していてわかったことがあるのですが、そもそもvue.jsのmethodの中身としてconsole.log自体使えないのかもしれません。 scriptに以下のmethodを追加して、クリックイベントで発火したのですが、consoleに何も表示されませんでした。 log: function(){ console.log('aaa'); },
redux

2020/08/16 11:28

いくつか衝撃の事実が・・・ ①consoleに表示されないのは、検索filterをかけていたからだった。本当は問題なく使用できる。 ②axiosでpostした場合、phpは$_POSTで値を受け取れない。
redux

2020/08/16 11:46

getRequestDataBody() { $body = file_get_contents('php://input'); if (empty($body)) { return []; } // Parse json body and notify when error occurs $data = json_decode($body, true); if (json_last_error()) { trigger_error(json_last_error_msg()); return []; } return $data; } } $data = getRequestDataBody(); var_dump($data); この記述にすることで、param内にjson形式で値を記述した場合に送信+response取得ができました。 お騒がせしてしまいすみません。
SanQ

2020/08/16 13:12

解決できたようで良かったです。 今回の解決方法を回答として載せてください。でないとこの問題は解決しているのにも関わらず他の方が回答しに来てしまうので
guest

回答2

0

'Content-Type':'application / x-www-form-urlencoded'
を指定しているのに、Urlエンコードしてないからだと思います。
エンコードするか、
"Content-Type": "application/json"
を指定してjsonでPOSTしてください。

slim3を扱ったことがありませんが、ドキュメントではをチラ見する限りjsonに対応していそうです。
http://www.slimframework.com/docs/v3/objects/request.html#the-request-body

投稿2020/08/17 04:14

nullbot

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

redux

2020/08/17 17:00

サンプルソースから自分の開発しているアプリに「解決した方法」でのソースを移植した際に上手くいきませんでしたが、回答者さんの方法でその問題も解決できました。 Content-Typeの意味もわからずコピーして使っていましたが、それじゃだめですよね。。。 勉強になりました。ありがとうございます。
guest

0

自己解決

API側を以下の記述にすることで解決。

getRequestDataBody() {
$body = file_get_contents('php://input');

if (empty($body)) {
return [];
}

// Parse json body and notify when error occurs
$data = json_decode($body, true);
if (json_last_error()) {
trigger_error(json_last_error_msg());
return [];
}

return $data;
}
}
$data = getRequestDataBody();
var_dump($data);

投稿2020/08/16 14:21

redux

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問