JavaScriptのAjaxでPOST送信したものをPHP側で受け取りたい

実装したいこと
formで値をPOST送信する際にページリロードを行わずにsubmitを行いたい。
その値をPHP側で受け取りたい。

色々と調べた結果、ページリロードをさせないでフォーム入力したものをsubmitさせるにはAjaxを使用して非同期通信にて実装しないとできないらしいです。
https://kobachan.biz/archives/?ID=0006
を参考にコードを書いてみましたがいまいち分からないためご教授して下さい。

//test.php

<?php
$value = "";
if($_POST){
$value = $_POST['name']; //←ここにPOST送信したもの受け取りたい。
}
var_dump($value); //Ajaxでsubmitしても$valueの中身は空のまま
?>

<html>
<head>
</head>
<body>
  <form id="form" action="javascript:void(0);">  <!--Ajaxにてsubmitするためaction属性でsubmitを無効化-->
    <input type="text" name="name">
    <input type="submit" id="submit" value="次へ">
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="ajax.js"></script>
</body>
</html>

//ajax.js

$(function(){
  $('#submit').click(function () {
    // 一括してフォームデータを取得
    var formData = $('#form').serialize();
    console.log(formData);  //name= の形で表示される。
      $.ajax({
          url: "test.php",
          type: "POST",
          data: formData
        }).done(function(data) {
           console.log(data);  //フォームに記入された値が表示 1と記入してsubmitしたらString"1"となる
        });
      });
});

上記のjsファイルでconsole.logを行い中身を確認したが値はちゃんと入っているのは確認できました。
ですがphpファイルのphpコード内の変数$valueに値が入らないです。
そもそもAjaxにて非同期でPOST送信したところでPHP側には入らない仕様なのでしょうか.....

m.ts10806

2020/09/30 02:21 編集

本件とは関係ないのですが、回答がついていながら未解決の質問が多く残ってるように思います。放置質問の解決が優先かと思います。

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

回答2件

ajaxで送ればpostされます。
postされた側に出力があるなら、戻り値をみればvar_dumpの結果も確認できます

投稿2020/09/30 03:11

yambejp

総合スコア114843

バックグラウンドで実行されるので「画面表示」という考え方はひとまず捨ててください。
参考URLもどこにも画面とAjax呼び出し先が同じようには書かれていません。

要件次第ですが、たいていは画面表示のないリクエストの受け口（PHPプログラム）を用意して、そこで受け取り、結果を返します。

js
1      $.ajax({
2          url: "ajax.php",
3          type: "POST",
4          data: formData
5        }).done(function(data) {
6           console.log(data);
7        });
8      });

ajax.php

php
1<?php
2$value = filter_input(INPUT_POST,'name');
3if(is_null($value)){
4    echo "nameが送られていない";
5    exit;
6}
7echo $value;
8

これでブラウザ開発ツールのコンソールにnameで送信された情報が出るはずです。

投稿2020/09/30 02:18

編集2020/09/30 02:22

m.ts10806

総合スコア80850

sundara.

2020/09/30 02:56

回答ありがとうございます。バックグラウンドで実行されるというのはPOST送信は実際に行われているが PHP側のvar_dump()等で値の確認することは不可能という解釈であっていますか？

m.ts10806

2020/09/30 03:12

先に書いたように「画面」という考え方を捨ててください。 Ajaxで実行結果は「出力」を受け取ります。 var_dump()はあくまで出力ですのでそれも実行結果としてJavaScriptが受け取ります。という前提ですが、リクエストの確認は結局は「デバッグ」の範疇です。幾らでも確認しようがあります。「Ajax デバッグ」とかで調べてください。

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

あなたの回答