AjaxのPOSTがうまくいかない

Question

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])
   && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
  if ($_POST['name']){
    $user->post();
  }
};

      $(document).ready(function() {
        $('#comment_form').submit(function(e) {
          e.preventDefault();
          var data = {id:$('#comment_thread_id').val() ,name:$('#comment_user_name').val() , text:$('#comment_text').val()};
          $.ajax({
            type: "POST",
            url: "talk.php",
            data: data,
          }).done(function(data){
            console.log("ajax通信に成功しました");

            }).fail(function(XMLHttpRequest, textStatus, errorThrown){
            console.log("ajax通信に失敗しました");
            })
            return false;
          });
      });

<form id ="comment_form" action="talk.php" method="post">
          <input id="comment_thread_id" type="hidden" name="id" value="<?= $sledid;?>">
          <p>名前<input id="comment_user_name" type="text" name="username" value=""></p>
          <p>本文<input id="comment_text" type="text" name="body" value=""></p>
          <input type="submit" name="" value="挿入">

public function post(){
  $sql = "insert into posts (post_id,name,body) values (:post_id,:name,:body)";
  $stmt = $this->_db->prepare($sql);
  $stmt->bindParam(':post_id',$_POST['id']);
  $stmt->bindParam(':name',$_POST['name']);
  $stmt->bindParam(':body',$_POST['text']);
  $stmt->execute();
}

ご覧いただきありがとうございます。
Ajaxに挑戦しているのですが、postされたデータが$_POST['id']しかpost()に反映されません。
御指摘ありましたら是非いただきたいです。

Comments

[masaya_ohashi]

submitした際にページ遷移していませんか？

[退会済みユーザー]

確認しましたが、遷移しておりませんでした。

[masaya_ohashi]

$.ajaxをする前にdataをログ出力したとき、正しく値は入っていますか？また、PHPで$_POSTをログ出力した時、どのような値が入っていますか？

[退会済みユーザー]

$_POSTをprint_rで出力しようとしましたが、何も出てきませんでした。他の出力方法はありますでしょうか？

[masaya_ohashi]

お使いのフレームワーク等にログ出力機能はありませんか？

[退会済みユーザー]

var_dump($_POST);としたところ、usernameとtextの確認ができました。お手数おかけして申し訳ありません。

[masaya_ohashi]

ちょっと待って下さい、var_dumpの結果はどこに表示されましたか？ブラウザの画面が切り替わって表示されましたか？それともajaxのレスポンスに返ってきていますか？

[退会済みユーザー]

phpの部分に、var_dump($_POST);を追加し、ページ更新たところ、画面上部に表示されました。しかし、その後何度かpostしてみましたが、$_POSTの中身が変わりません。

[ooeok]

htmlとphpは同じファイル(talk.php)ですか？

[退会済みユーザー]

to ooeok様　同じファイルです

[ooeok]

ありがとうございます。謎はすべてとけた！！それでformのpostでtalk.phpへ飛んでいたんですね。

[masaya_ohashi]

画面遷移していないように見えて、同じ画面へ遷移しているので気付いていない、ということですね。実際は遷移しているので、ブラウザバックもできるはずです。リロードするときに「このままリロードを続けると同じリクエストを飛ばしちゃうけどいい？」みたいな警告がブラウザから出るかと思います。

[退会済みユーザー]

to masata_ohashi様　確かに更新時に警告が出てきていました。教えていただいた情報を元に再度コードを打ち直してみます

Answer 1

ajaxで送信がうまくいった場合、画面の遷移(画面全体を再読み込みするような挙動)は起きません。しかし、$_POSTをvar_dumpして画面にusernameやbodyが表示されるという事実は「ajaxではなく普通にformとして送信した結果」であることを指しています。jqueryの.clickで書かれた処理は、その直後formのsubmitの実行により、おそらく途中でキャンセルされています。
formを利用してajax通信をする場合、必ず**本来のフォームの動作をキャンセルしなければいけません。**そのためにはEvent#preventDefaultを実行する必要があります。return falseだけではイベントのバブリングがキャンセルされるだけで、動作そのものがキャンセルされるわけではありません。
※<form onSubmit="return false;">という書き方と混同されている可能性があります。こちらはreturn falseで本来の動作がキャンセルされます。

また、#send_commentのclickイベントをトリガーにしていますが、この場合usernameやbody内で「Enterを押して送信」した場合にajax通信でなく、formのsubmitが発生してしまうため、そもそもトリガーをformのsubmitで取るほうが良いです。

<form id="form" action="" method="post"> <!-- formにidを振る -->

$('#form').submit(function(e) { // formのsubmitに処理を登録する、引数としてEventのオブジェクトeを受け取る
  e.preventDefault(); // これを一行目に追加

Comments

[退会済みユーザー]

質問内容のコードをご指摘いただいた通り打ち替え、色々と試みてはみたのですがやはり、$_POST['id']しかmysqlにinsertできませんでした。
consoleには確かにajax通信に成功しましたと表示されているのですが、、、
面倒であれば返信は結構です。知らないことがたくさんあり、いい勉強になりました。本当に感謝しています。

[masaya_ohashi]

確認なのですが、DBのpostsテーブルのpost_idカラムにsledidだけが入っていて、nameとbodyは空のレコードが保存されていく、という認識で正しいですか？

[masaya_ohashi]

postsテーブルにidというAUTO_INCREMENTなカラムがあって、そこだけが増えていく、という意味ではないですよね？$_POST['id']のデータがpost_idのカラムに入っているデータが増えていくんですよね？

[退会済みユーザー]

post_idはauto_incrementではないので、仰られている通り、$_POST['id']のデータがpost_idのカラムに入っていることは間違いありません。
ajaxでこの場合、id,name,textの３つの$_POSTがtalk.phpに送信？されていると思いますが、配列で送信されているのでしょうか？
また関係しているかはわかりませんが、function post()はControll.phpという別ファイルから、require_onceで呼び出して、$user->post()と使用しているのですが、関係はありませんでしょうか？

[masaya_ohashi]

$_POST['id']が取れている以上、jQuery.ajaxで送信した連想配列はPHP側で正しく受け取れていると思います。試しにinsertするときにbindParamに渡している$_POST['name']と$_POST['text']の2つを何か適当な固定の文字列("山田太郎"とか"投稿文書"とかの文字列)に変えたとき、正しくinsertされるか試してみてもらえますか？

[退会済みユーザー]

id:$('#comment_thread_id').val() ,name:username ,text:usertext};で行なったところ、
コンソールにUncaught ReferenceError: text is not definedというふうに出てきました。
idはinsertされていませんでした

[退会済みユーザー]

name:"username"、text:"usertext"です。訂正します

[退会済みユーザー]

シングルクォートであれば、またしてもidのみinsertされています

[masaya_ohashi]

jQuery側ではなくPHPのbindParamに渡している値を直接「固定の文字列」にしてくださいとお願いしたつもりです…
$stmt->bindParam(':name',"山田太郎");
$stmt->bindParam(':text',"投稿文書");

[退会済みユーザー]

大変失礼いたしました。
試してみたところ、またしてもidのみのinsertでした。
ajaxではなくサーバー側の問題なのでしょうか？

[退会済みユーザー]

> $stmt->bindParam(':name',"山田太郎");
$stmt->bindParam(':text',"投稿文書");

ダメでしょ。。。

$tmp1 = 'hoge';
$tmp2 = 'piyo';
$stmt->bindParam(':post_id',$_POST['id']);
$stmt->bindParam(':name',$tmp1);
$stmt->bindParam(':body',$tmp2);

さっさとエラーを表示するようにすればいいのに。。。

[masaya_ohashi]

あ、そうでした。bindParamって変数を参照でバインドするんでしたね…直接文字列渡しちゃだめですね。
te2jiさんの指摘のやり方でテストしてみてください。
エラーについても指摘されているので、PHPのエラーログをあさってみてください。なにかWarning等が出ているかもしれません。

Answer 2

ajax を使用した時のデバッグ方法覚えたほうがイイですよ。

ajax のデバッグは、「ブラウザの開発ツール」で request/response を確認し、不具合が発生しているときは、サーバサイドは notice も含めてエラー表示し、該当箇所を確認してみる事が重要です。

今回の件は、上記を行えば、問題箇所が大体特定できるはずです。

あと、質問内容とは直接関係はないですけど、ちゃんと入力値の確認と投稿元が自サイトであることの確認もしたほうが良いです。

Answer 3

ajaxでpostする前にsubmitが効いてしまい、formの方でpostされちゃってるのではないでしょうか。
$_POSTをダンプしてみて下さい。
usernameとbodyが取れていたらそうです。

var_dump($_POST);

Comments

[退会済みユーザー]

var_dump($_POST)を行なったところ、usernameとbodyを確認できました。
画面の遷移は確認できないのですが、どの様な現象？が起きてしまっているのでしょうか？
大雑把な質問で申し訳ありません。

[masaya_ohashi]

なん…だと…？ 画面遷移は発生していないのではなかったのですか？var_dumpの結果が画面に表示されたのですか？

[退会済みユーザー]

確かに確認しましたが、画面のリロードはありませんでした。その後var_dump($_POST);を記述し、ページの更新をしたところ、usernameとbodyが画面に表示されました。その後何度かpostしてみましたが、POSTの中身に変更はありませんでした。thread_idのみが、DBに反映されているのは何故なのでしょうか？

[ooeok]

考えられるのは$.ajax内でfalseを返していることでしょうか。

> return false;

でもそれだとajaxが実行された上でformのpostが飛ばないはず。
自分でテストしてみないと何が起こっているか分からないです。

とりあえずtype="submit"ではなく、type="button"にしてみてはどうでしょう。
で、開発ツールのnetworkで監視しときましょう。

Answer 4

$stmt->bindParam(':name',$_POST['name']);

$stmt->bindParam(':body',$_POST['text']);

POSTするのは「username」と「body」だけど
参照しているのは「name」と「text」になっています

postする場合と違うロジックでajaxで更新する仕組みになっているか確認下さい

追記

もとから「$sledid」を渡していますが、これはpostsテーブルに対してpost_idは
ユニーク属性をもっていて、渡したデータは絶対に存在しないという保証はあるのでしょうか？
もしそうでない場合は、データが競合してエラーになっている可能性はあります。

たとえばinsert into on duplicate update構文で更新をする必要があるかもしれません

Comments

[masaya_ohashi]

ajaxで送っているdataではnameとtextになっているのであっていませんか？

[yambejp]

masaya_ohashiさん、ありがとうございます。

おっしゃる通り、ajaxでnameを付け替えているので私の指摘は合理的ではなかったです
あらためて指摘を追記しておきました

Answer 5

var data = {
    id:$('#comment_thread_id').val() ,
    name:$('#comment_user_name').val() , 
    text:$('#comment_text').val()
  };

の部分はPHPで受け取る場合JavaScript（jQuery）側の指定が、

type: "POST" となっていますから、PHP側でフォームのmethd="post"となっている場合と同じで、以下のようにJavaScriptから送られたデータがPHP側で以下のように受け取れるはずです。

$id = (string)filter_input(INPUT_POST, 'id');
$name = (string)filter_input(INPUT_POST, 'name');
$text = (string)filter_input(INPUT_POST, 'text');