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

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

ただいまの
回答率

87.35%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,807

score 17

前提・実現したいこと

ボタンを押すと$_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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mari.rinn

    2019/09/23 21:42 編集

    ちなみにですが、ファイルを分けて試してみられたらどうなりますか? htmlのファイルとphpのファイルを別々に。

    なので<h1></h1>内のphpはif文の中に入れて、ajaxのdoneのコールバックの方を
    $("h1").text(data); で。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/09/24 10:19

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

    キャンセル

  • TDN56262687

    2019/09/24 12:06

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

    キャンセル

回答 3

+4

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/24 12:11

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

    キャンセル

+2

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 20:48

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

    キャンセル

  • 2019/09/23 21:07

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

    キャンセル

  • 2019/09/23 21:13 編集

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

    キャンセル

checkベストアンサー

+1

こうしてください

  • test.php
<?php
$test_string = filter_input(INPUT_POST,'abc');
if(!is_null($test_string)){
  print htmlspecialchars($test_string);
  exit;
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#test_button").click(function(){
    $.ajax({
    type: "POST",
    url: "test.php",
    data: {"abc":"xyz"},
    }).done(function(data){
      //alert(data);
      $('h1').html(data);
    }).fail(function(xhr,err){
      alert(err);
    })
    });
});
</script>
<h1><?=$test_string;?></h1>
<button type="button" name="button" id="test_button">btn</button>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/24 11:50

    ご回答ありがとうございます。実際にこのコードで試してみたらうまく動いてくれました。

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る