jqueryでpost送信しても$_POSTがnullのままになってしまう

前提・実現したいこと

ボタンを押すと$_POSTに値がセットされ、それを表示するものを作っていたのですが、送信には成功するものの、$_POSTには値がセットされず、nullのままになってしまいます。どなたか解決方法を教えていただけないでしょうか？

該当のソースコード

<?php
$test_string = "";



if( isset($_POST['abc']) ){
  $test_string = $_POST['abc'];
}

 ?>

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>テスト</title>
     <script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script>
     <script type="text/javascript">
       $(function() {
         $("#test_button").click(function(){
           $.ajax({
             type: "POST",
             url: "test.php",
             data: {"abc":"xyz"},
           }).done(function(data){
             alert("ok");
           }).fail(function(XMLHttpRequest, textStatus, errorThrown){
             alert("error");
           })
         });
       });
     </script>
   </head>
   <body>
     <h1><?php echo $test_string ?></h1>
     <button type="button" name="button" id="test_button"></button>
   </body>

 </html>

試したこと

ネットで調べてみましたが、該当するエラーに遭遇している記事が見つかりませんでした。

補足情報（FW/ツールのバージョンなど）

OS:Windows10
jqueryのバージョン:3.4.1
phpのバージョン:7.3.9

kei344

2019/09/23 10:50

「nullのまま」はどのように確認されたのでしょうか。

退会済みユーザー

2019/09/23 11:59 編集

$test_string に受け取ったあと、どうやって確認したんだろう？テスト方法を具体的に示してほしい。

TDN56262687

2019/09/23 11:59

if文より下のところで$_POST['abc']を別の新たな変数に代入するといったことをすると、 Undefined index: abc というエラーが出てきたところから判断しました。

mari.rinn

2019/09/23 12:03

<?php echo $test_string ?>　の部分 stringの後の　;　が抜けてますが、実際のコードはどうなっていますか？

TDN56262687

2019/09/23 12:07

ご指摘ありがとうございます。実際のコードの方も;が抜けてました。追加してみましたが、まだうまくいかないです。

mari.rinn

2019/09/23 12:47 編集

ちなみにですが、ファイルを分けて試してみられたらどうなりますか？　htmlのファイルとphpのファイルを別々に。なので<h1></h1>内のphpはif文の中に入れて、ajaxのdoneのコールバックの方を $("h1").text(data);　で。

退会済みユーザー

2019/09/24 01:19

送信側webブラウザに表示するためのコードと、受信側phpのコードを同じもので兼ねている、って今わかった。ミニマルにテストするなら通常は別々に、html+jsで一つ、phpで一つ書くよね。送信側が悪いのか受信側が悪いのか、切り分けしにくいのってやりづらそうに思うんだけど。

TDN56262687

2019/09/24 03:06

ご指摘ありがとうございます。送信側と受信側に分けたほうがより実装しやすいことに気が付き、自分の思った通りの動作をしてくれました。ありがとうございます。

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

回答3件

$_POSTには値がセットされず、nullのままになってしまいます。

ページを表示して、「#test_button」の要素をクリックしても、ページは書き換わりません。

js
1.done(function(data){
2  // alert("ok");
3  console.log(data); // $_POST が反映されているかはこっちのデータを見る
4})

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

投稿2019/09/23 14:59

kei344

総合スコア69596

TDN56262687

2019/09/24 03:11

ご回答ありがとうございます。ajaxの使い方を今まで完全に勘違いしていたことに気が付けました。今まで僕は#test_buttonを押せばページが書き換わると考えていましたが、.doneの中でページの書き換えに関する処理をすべて行えば問題なく動作しました。ありがとうございます。

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

data: {"abc":"xyz"},

を

data: {abc:"xyz"},

とするのではないかと。

jQuery.post() | jQuery API Documentation

dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

ってことなので、dataTypeを明示してみてはどうかな。

POST送信の失敗例（リダイレクトが原因）
【Laravel】AjaxでPOSTできない

投稿2019/09/23 10:44

編集2019/09/23 12:05

退会済みユーザー

総合スコア0

TDN56262687

2019/09/23 11:48

回答ありがとうございます。試してみましたが、うまくいきませんでした。

退会済みユーザー

2019/09/23 12:07

「うまくいきませんでした」←具体的には？

TDN56262687

2019/09/23 13:00 編集

すみません、具体的な記述が抜けていました。done以降の処理が実行されますが、$test_stringが依然""のままになっています。また、dataTypeの明示も行いましたが、$test_stringは""のままでした。

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

ベストアンサー

こうしてください

test.php

javascript
1<?php
2$test_string = filter_input(INPUT_POST,'abc');
3if(!is_null($test_string)){
4  print htmlspecialchars($test_string);
5  exit;
6}
7?>
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9<script>
10$(function(){
11  $("#test_button").click(function(){
12    $.ajax({
13    type: "POST",
14    url: "test.php",
15    data: {"abc":"xyz"},
16    }).done(function(data){
17      //alert(data);
18      $('h1').html(data);
19    }).fail(function(xhr,err){
20      alert(err);
21    })
22    });
23});
24</script>
25<h1><?=$test_string;?></h1>
26<button type="button" name="button" id="test_button">btn</button>