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

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

ただいまの
回答率

90.34%

  • jQuery

    8770questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1409questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • PDO

    401questions

    PDO(PHP Data Objects)はPHPのデータベース抽象化レイヤーです。

AjaxのPOSTがうまくいかない

受付中

回答 5

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 3,404
退会済みユーザー

退会済みユーザー

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()に反映されません。
御指摘ありましたら是非いただきたいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • ooeok

    2017/10/30 14:39

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

    キャンセル

  • masaya_ohashi

    2017/10/30 14:43

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/10/30 14:45

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

    キャンセル

回答 5

+2

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(); // これを一行目に追加

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/30 16:47

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

    キャンセル

  • 2017/10/30 16:56

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

    ダメでしょ。。。

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

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

    キャンセル

  • 2017/10/30 17:01

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

    キャンセル

+1

  $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構文で更新をする必要があるかもしれません

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/30 13:24

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

    キャンセル

  • 2017/10/30 13:35

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

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

    キャンセル

+1

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

var_dump($_POST);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/30 13:34

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

    キャンセル

  • 2017/10/30 13:37

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

    キャンセル

  • 2017/10/30 13:47

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

    キャンセル

  • 2017/10/30 13:59

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

    > return false;

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

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

    キャンセル

+1

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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');

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • jQuery

    8770questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1409questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • PDO

    401questions

    PDO(PHP Data Objects)はPHPのデータベース抽象化レイヤーです。