XHRでPOSTしてもGETと判定するPHPに困惑

以下のように、okというクラスのDOMをクリックしたときに
自分に対してPOSTし、それに反応してほしいのですがスルーされてしまいます。

XHRのsendのあと、PHPでのPOSTかどうかのif文がスルーされてしまうのは
GETと判定されてしまっているようだからなのですがどうしてでしょうか？
XHRのonloadはOKとなります
何か思いっきり勘違いしてそうな気がするのですがよろしくおねがいします

// test.php

PHP
1<?php
2  try{
3	if($_SERVER['REQUEST_METHOD'] == 'POST'){
4		$requestDate = $_POST['get_data'];
5		echo $requestDate;
6		exit;
7    }
8  }catch(Exception $e){
9	$ErrMessage = $e->getMessage();
10	header("Location: /error.php?err=".$ErrMessage);
11	exit;
12  }
13?>
14
15<!DOCTYPE html>
16<html lang="ja">
17<head>
18  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
19</head>
20<body>
21  <button class="ok">ボタン</button>
22  <script>
23	$(function(){
24		xhr = new XMLHttpRequest();
25        xhr.onload = function (e) {
26         if (xhr.readyState === 4) {
27          if (xhr.status === 200) {
28           console.log('OK');
29         }
30       }
31     };
32	 $(".ok").click(function(){
33		let data = 'myData';
34		post(xhr, data);
35     });
36   });
37
38  function post(xhr, target_data) {
39    xhr.open('POST', './test.php', true);
40    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
41    var request = "get_data=" + target_data;
42    xhr.send(request);
43  }
44  </script>
45</body>
46</html>

m.ts10806

2021/07/07 08:07

自身に対して非同期通信とはどういう意図でしょうか。非同期通信ならlocationによるリダイレクトは意味ないのでは

m.ts10806

2021/07/07 08:08

あと「スルーされてる」とは、どのように確認したのでしょうか

Fujiman

2021/07/07 08:18 編集

>非同期通信ならlocationによるリダイレクトは意味ないそこが私がわかっていないところだとおもうのですが期待する動きはクリックの後、”myData”という文字列が画面に表示されることです >「スルーされてる」とは、どのように確認したの上と同じになりますが、文字が表示されないということが、この意味になりますユーザーがクリックしたとき、自身のPHPのコードでその渡されたデータを処理したいというのが意図としてあり、フォームのsubmitとかでなく、たんなるクリックイベントからそれを実現したいと思っています。

行動規範の内容に同意します

回答3件

文字が表示されないということ

そもそもJavascriptがレスポンスを画面上に表示するコードになってません。
コンソールにOKと出たのでしたら通信は成功しているのでしょうから、XMLHttpRequest.responseを確認し、「画面に表示するための処理」を記述してください。

つまり「POSTがスルーされた」確認も現状では不十分です。

非同期通信はバックグラウンドで処理を行う概念であるため、そもそも「画面表示」という考え方を持ちません。
リクエストの呼び元に「出力」を返します（形式はContent Typeに依存）

処理経過を確認したいのでしたら、デバッグツールを入れる、途中でログファイルに書き出す、などして対応する必要があります。

画面表示という概念がないので、例えexitしてたとしても、画面表示用のプログラムと一緒にしてしまうのは役割分担からして不適当と言えます。

投稿2021/07/07 08:30

編集2021/07/07 08:59

m.ts10806

総合スコア80875

Fujiman

2021/07/07 09:35

ありがとうございます。突き詰め方があまかったです。最終的にPOST通信そのものは成功していることがわかりました。XHRのresponseTextで確認すらできていなかったのが問題で、レスポンスと画面表示を意識できていませんでした

行動規範の内容に同意します

上と同じになりますが、文字が表示されないということが、この意味になります

そんな大雑把なレベルで問題を把握しても、解決には繋がりません。ブラウザの開発ツールからネットワークタブを開けば、（XHRによるものを含めて）どのようなリクエストが行われたか確認できます。

そもそも、意図したリクエストが送信されていない
リクエストに対するレスポンスが意図したものでない
レスポンスを受け取ったJavaScriptが正しく処理できていない

どこに問題があるのかを把握するのが先決です。

投稿2021/07/07 08:18

maisumakun

総合スコア146018

Fujiman

2021/07/07 08:31

ありがとうございます。確認してみました。ボタンをクリックしたときのリクエストの様子は以下になります。フォームからsubmitしたときの様子と比較しながらもうすこし何が違うのか見ていこうと思います RequestHeaders Accept: */* Accept-Encoding: gzip, deflate Accept-Language: ja,en-US;q=0.9,en;q=0.8 Connection: keep-alive Content-Length: 15 content-type: application/x-www-form-urlencoded;charset=UTF-8 Host: reservation Origin: http://sample.com Referer: http://sample.com/test.php User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 get_date: myData ResponseHeader Connection: Keep-Alive Content-Length: 6 Content-Type: text/html; charset=UTF-8 Date: Wed, 07 Jul 2021 08:25:27 GMT Keep-Alive: timeout=5, max=98 Server: Apache/2.4.46 (Unix) OpenSSL/1.1.1j PHP/8.0.3 mod_perl/2.0.11 Perl/v5.32.1 X-Powered-By: PHP/8.0.3

maisumakun

2021/07/07 08:33 編集

Content-Length: 6ですし（HTMLを全部返したら6バイトでは収まりません）、PHP側は正しく動作しているのではないでしょうか？

Fujiman

2021/07/07 09:14 編集

ありがとうございます。そうですね、ちょうど期待する ’ｍｙData’ の6バイト分になるサイズなので応答は正しいのか？と思いxhrのonloadイベントハンドラ内でxhr.responseTextを調べたら自身のファイル内のPHPで加工したデータが取得できていました。もう少し調べてから質問しないといけないですね。失礼いたしました。

行動規範の内容に同意します

ベストアンサー

//test.php

PHP
1<?php
2$requestData = filter_input(INPUT_POST,'get_data');
3if(!is_null($requestData)){
4  die($requestData);
5}
6?>
7<script>
8window.addEventListener('DOMContentLoaded', ()=>{
9  document.querySelector('.ok').addEventListener('click',()=>{
10    const url="test.php";
11    const body=new FormData();
12    body.append('get_data','myData');
13    const method="post";
14    fetch(url,{body,method}).then(res=>res.text()).then(console.log);
15  });
16});
17</script>
18<form method="get">
19<input type="hidden" name="get_data" value="myData">
20<input type="submit" value="get">
21</form>
22<form method="post">
23<input type="hidden" name="get_data" value="myData">
24<input type="submit" value="post">
25</form>
26<button class="ok">ボタン</button>
27