Go to Qiita Advent Calendar 2024 Top
LoginSignup
toukanno
@toukanno (kurisu erisu)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Ajax通信　php　掲示板　イベントハンドラを使って情報ボタンで 値を取り出せなくて困っている。

Q&A

JavaScriptMySQLjQueryPHP5.3Ajax

phpでforeachを使ってreply_parent_idが0のものつまり最初の投稿のものだけに情報ボタンをつけていき
ボタンを押したら投稿内容と日時をAjaxで値を取り出し別のテーブルに出力したい
DBには接続できているが
ajax通信ができなくて困っている clickイベントハンドラではidが変数なのでむずかしい
修正
onclickで関数からajax通信して取り出してもよい
github url: https://github.com/toukanno/mysqlajax

全部ではないが一応DBのイメージ
1,text_id
2,reply_parent_id
3,reply_id
4,user_id
5,comment
6,datetime
7,deleteflg
が振られている

text.csv
1,0,0,11,ないよう1,2020-09-24 07:09:07,0
2,0,0,11,ないよう２,2020-09-24 07:09:13,0
3,0,0,11,ないよう３,2020-09-24 07:09:21,0
4,0,0,11,ないよう４,2020-09-24 07:09:23,0
5,0,0,12,ないよう５,2020-09-24 07:09:32,1
6,0,0,12,ないよう６,2020-09-24 07:09:37,0
7,0,0,12,ないよう７,2020-09-24 07:09:45,0
8,7,7,12,7番目のuser3へ返信：ないよう８,2020-09-24 08:09:23,0
9,7,8,12,8番目のuser3へ返信：ないよう9,2020-09-24 09:09:13,0
10,6,6,11,6番目のuser3へ返信：へんしんないよう,2020-09-25 01:09:58,0
11,2,2,11,2番目のuser2へ返信：へんしんないよう２,2020-09-25 01:09:02,0
12,7,9,11,9番目のuser3へ返信：へんしんないよう3,2020-09-28 01:09:06,0
13,7,12,10,12番目のuser2へ返信：へんしんないよう4,2020-09-28 01:09:10,0

変更してみました

top.php
<!DOCTYPE html>
<html lang="ja">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>投稿フォーム</title>
  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  <script>
    function send(data) {
      console.log(data);
      var senddata = {
        request: data
      };
      console.log(data);
      $.ajax({
        type: "POST",
        url: "send.php",
        data: senddata

      }).done(function(data) {
        // var result = $(data).find('.comment, .datetime');
        console.log(data);
        // console.log(result);
        // console.log(result[0]);
        // console.log(result[1]);
       console.warn(data);
        // $('#comment').html(result[0]);
        // $('#datetime').html(result[1]);
        // $('#table').append(data);
        $('#table').html(data);
        // $('#sendvalue').append(result[0]);
        // $('#sendvalue').append(result[1]);
        // $('#datetime').append(result[1]);
      }).fail(function() {
        alert("error");
      });

    }

  </script>

</head>

<body>
  <div class="row">
    <form action="comment_insert_done.php" method="post">
      <input type="text" name="comment">
      <input type="submit" value="送信">
    </form>
  </div>

 <div class='table' id="table">
  </div>
  <?php

  require_once("func/header.php");

  define('DB_HOST', 'localhost');
  define('DB_NAME', 'XXXX_db');
  define('DB_USER', 'XXXX');
  define('DB_PASSWORD', 'XXXX');
  // 文字化け対策
  // $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET 'utf8'");
  $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');
  $pdo = new PDO('mysql:host=localhost;dbname=XXXX_db;', 'XXXX', 'XXXX',  array(
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'
  ));
  echo "<table class='table'>
<thead class='thead-light'>
  <tr>
  <th>コメント</th>
  <th>投稿日時</th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  </tr>
</thead>
";
  $result = $pdo->query('SELECT * FROM t_text WHERE reply_parent_id = 0 AND deleteflg = 0 AND comment IS NOT NULL  ORDER BY datetime DESC');

  $send = "";
  foreach ($result as $row) {

    $sendid = $row['text_id'];

    echo "<tr>";
    echo "<td>" . $row['comment'] . "</td>";
    echo "<td>" . $row['datetime'] . "</td>";
    echo '<td>';
    echo '<form action="comment_change.php" method="post">';
    echo '  <input type="hidden" value="' . $row['text_id'] . '" name= "text_id">';
    echo '  <input type="hidden" value="' . $row['comment'] . '" name= "comment">';
    echo '  <input type="submit" class="btn btn-success" value="変更" >';
    echo "</form>";
    echo "</td>";
    echo '<td>';
    echo '<form action="comment_delete_done.php" method="post" onClick="return confirm(\'削除しますか？\');">';
    echo '  <input type="hidden" value="' . $row['text_id'] . '" name= "text_id">';
    echo '<input type="submit" class="btn btn-danger" value="削除" >';
    echo "</form>";
    echo "</td>";
    echo '<td>';
    echo '<form action="reply.php" method="post" onClick="return confirm(\'返信しますか？\');">';
    echo '  <input type="hidden" value="' . $row['text_id'] . '" name= "text_id">';
    echo '  <input type="hidden" value="' . $row['reply_parent_id'] . '" name= "reply_parent_id">';
    echo '  <input type="hidden" value="' . $row['user_id'] . '" name= "user_id">';
    echo '<input type="hidden" value = "' . $row['comment'] . '" name= "comment">';
    echo '<input type="submit" class="btn  btn-secondary" value="返信" >';
    echo "</form>";
    echo "</td>";
    echo '<td>';
    echo '<form  method="post" onClick="return confirm(\'情報を表示しますか？\');">';
    echo '  <input type="hidden" value="' . $row['text_id'] . '" name= "text_id" id = "request">';
    // echo '<input type="button" class="btn btn-info" value= "' . $send . '"id = "' . $send . '" name = "info"  onClick="send(' . $sendid . ')">';
    // echo '<script type="text/javascript">';
    echo '<input type="button" class="btn btn-info" value= "情報" name = "info" data-val = "内容"  onClick="send(' . $sendid . ')">';
    // echo "</script>";
    echo "</form>";
    echo "</td>";
    echo "</tr>";
    $reply_id = $row['text_id'];
    // $reply_id = $row['reply_parent_id'];
    $result2 = $pdo->query('SELECT * FROM t_text WHERE reply_parent_id = "' . $reply_id . '" AND deleteflg = 0 AND comment IS NOT NULL ORDER BY datetime DESC');

    foreach ($result2 as $row2) {
      // print_r($row2['text_id']);
      echo "<tr>";
      echo "<td>" . $row2['comment'] . "</td>";
      echo "<td>" . $row2['datetime'] . "</td>";
      echo '<td>';
      echo '<form action="comment_change.php" method="post">';
      echo '  <input type="hidden" value="' . $row2['text_id'] . '" name= "text_id">';
      echo '  <input type="hidden" value="' . $row2['comment'] . '" name= "comment">';
      echo '<input type="submit" class="btn btn-success" value="変更" >';
      echo "</form>";
      echo "</td>";
      echo '<td>';
      echo '<form action="comment_delete_done.php" method="post" onClick="return confirm(\'削除しますか？\');">';
      echo '  <input type="hidden" value="' . $row2['text_id'] . '" name= "text_id">';
      echo '<input type="submit" class="btn btn-danger" value="削除" >';
      echo "</form>";
      echo "</td>";
      echo '<td>';
      // print_r($row2['text_id']);
      echo '<form action="reply.php" method="post" onClick="return confirm(\'返信しますか？\');">';
      echo '  <input type="hidden" value="' . $row2['text_id'] . '" name= "text_id">';
      echo '  <input type="hidden" value="' . $row2['reply_parent_id'] . '" name= "reply_parent_id">';
      echo '  <input type="hidden" value="' . $row2['user_id'] . '" name= "user_id">';
      echo '<input type="hidden" value = "' . $row2['comment'] . '" name= "comment">';
      echo '<input type="submit" class="btn  btn-secondary" value="返信" >';
      echo "</form>";
      echo "</td>";
      echo "</tr>";
    }
  }
  echo '</table>';
  ?>

</body>

</html>
send.php
<?php

/**データベースに接続 */
$dbh =  new PDO('mysql:host=localhost;dbname=XXXX_db;', 'XXXX', 'XXXX',  array(
  PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'
));
//このページでechoしたものがhtmlに返されて出力される
header("Content-type: text/plain; charaset=UTF-8");

if (isset($_POST['request'])) {

  //text_id(int型)で検索するためint以外を弾く
  $requestid = (int)filter_input(INPUT_POST, 'request');

  echo "<table class='table'>
  <thead class='thead-light'>
    <tr>
    <th>コメント</th>
    <th>投稿日時</th>
    </tr>
  </thead>
  ";
  $result = $dbh->query('SELECT * FROM t_text WHERE text_id = "' . $requestid . '" ORDER BY datetime DESC');

  foreach ($result as $row) {
    echo '<tr id="wrap">';
    echo '<td class = "comment">' . $row['comment'] . '</td>';
    echo '<td class = "datetime">' . $row['datetime'] . '</td>';
    echo '</tr>';
  }
  $result2 = $dbh->query('SELECT * FROM t_text WHERE reply_parent_id = "' . $requestid . '" ORDER BY datetime DESC');

  foreach ($result2 as $row2) {

    echo '<tr id="wrap">';
    echo '<td class = "comment">' . $row2['comment'] . '</td>';
    echo '<td class = "datetime">' . $row2['datetime'] . '</td>';
    echo '</tr>';
  }
}
echo '</table>';

参考にしたサイト
https://qiita.com/0_a_e/items/47835b95e524310925d7
htmlで複数のクラスを指定 #send
半角スペースを開けて複数記述
action属性がないform　formのデータの送信先はそのhtmlファイル自身になる。
https://qiita.com/tortuepin/items/a1cc9ad20f4b6f148a30
https://creatorquest.jp/reference/html/element/form/
nameネーム属性は、 フォームに名前を指定する属性です。他のフォームのname属性と重複したり、空文字にすることはできません。なお、HTML4.01では推奨されておらず、XHTML1.0でも非推奨、XHTML1.1では廃止されているので注意が必要です。代わりに、id属性を使いましょう。
https://techacademy.jp/magazine/14872
JavaScriptで書く「var,let,const」の違いと使い分け方法
letでは再宣言が禁止されています。
techacademy = '再代入OK';
val()の使い方
https://www.sejuku.net/blog/45297
PHPではヘッダーを書かなくても自動的に送信してくれています。
生のＨＴＴＰヘッダーを送信する
http://doremi.s206.xrea.com/php/tips/header.html
text/plain【MIMEタイプ】とは
https://wa3.i-3-i.info/word15788.html
「このファイルは普通のテキストファイル（中身が文字だけのファイル）ですよ」を意図した表現
次はUTF-8の文字コードで書かれたテキスト文書を送信する時のヘッダーになります。
header("Content-type: text/plain; charset=UTF-8");
header("Content-type: text/plain; charset=UTF-8");
https://www.softel.co.jp/blogs/tech/archives/3071
https://www.php.net/manual/ja/function.header.php
すべての実際の 出力の前にコールする必要がある
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers
https://agohack.com/how-to-detect-an-ajax-request-on-php/
[PHP] Ajax 通信かどうかの判定方法
http://mio-koduki.blogspot.com/2012/03/phpjavascript-ajax.html
https://blog.dksg.jp/2010/07/phpajax.html
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
XMLHttpRequest
https://ja.javascript.info/xmlhttprequest
https://www.php.net/manual/ja/function.filter-input.php
https://techacademy.jp/magazine/37062
https://qiita.com/Shigeyoshi_Koyama/items/8df42e2b070bd387f1ee
sprintf()でSQL文を生成する際、%は%でエスケープできる

https://techacademy.jp/magazine/24111

https://qiita.com/cr_tk/items/900914e8a6e19ee3c5b7
PHPからhtml、javascriptへの変数、配列の受け渡し
https://itsakura.com/js-moji-renketsu
JavaScript 文字列を結合するサンプル
https://qiita.com/super2baba/items/b1301ca567b60b2e00c7
jQueryのAjaxをPHPで使うやつ

jQueryの基本 - $(document).ready
https://qiita.com/8845musign/items/88a8c693c84ba63cea1d
これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。
$(document).ready(function(){
$(".smooth").smoothScroll();
$("#slider").slider();
$("#nav").nav();
});

//もしくは

$(function(){
$(".smooth").smoothScroll();
$("#slider").slider();
$("#nav").nav();

});
$(window).loadとの違い
画像など含めすべてのコンテンツの読み込みが終わる
jQueryのイベントをアロー関数で
https://codecodeweb.com/blog/424/
https://rachicom.net/frontend/jquery-this.html
jQuery でもアロー関数とthisを使いたい
$(document).readyの複数記述はあり？なし？
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12141795497
http://js.studio-kingdom.com/jquery/ajax/ajax
Ajaxリクエストを送信するオプションをキーと値のペアで指定します。 このオプションに初期値を設定したい場合は、 $.ajaxSetup()を使用します。
https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9
Ajaxとは「Asynchronous JavaScript + XML」の略
ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる
他の処理と同時並行で、サーバとやりとりができる
[success / function
AJAX通信が成功した場合に呼び出されるAjax Eventです。戻ってきたデータとdataTypeに指定した値の2つの引数を受け取ります。
function(data, dataType){
// dataの値を用いて、通信成功時の処理を記述します。
this; // thisはAJAX送信時に設定したオプションです
}]
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
https://www.atmarkit.co.jp/ait/articles/1007/30/news110_2.html
イベントsuccess　コールバック関数
https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b
イマドキの$.ajax()はこう書く
$.ajax({
オプション
})
.then(成功時の処理, 失敗時の処理);
アロー関数でもっとイマドキに
https://medium.com/@bbxxuw/jquery-ajax%E3%81%AEsuccess-error-complete%E3%81%AF%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%81%A3%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%9F-797da1b8adc7
jQuery ajaxのsuccess、error、completeは非推奨って知ってた？
$.ajax({
url:'header.html'
type: 'GET',
cache: false,
dataType: 'html'
}).done(function(html) {
$('#container').append(html);
}).fail(function() {
alert('エラーが起きました');
}).always(function() {
console.log('complete');
});
XMLHttpRequest, textStatus, errorThrown
【ajax】通信エラーとなった原因の取得方
https://hacknote.jp/archives/38740/
・XMLHttpRequest.status：HTTPリクエストのステータスの取得
・textStatus：タイムアウト、パースエラー等のエラー情報の取得
・errorThrown.message：例外情報の取得
https://qiita.com/qwq00/items/b95edb10156a64fa347f
https://daitaisonnamon.hatenablog.jp/entry/2019/10/31/234041
https://remotestance.com/blog/2687/
https://ysklog.net/jquery/ajax/4501.html
ajax通信エラーの原因を取得
HTTP レスポンスステータスコード
https://developer.mozilla.org/ja/docs/Web/HTTP/Status
情報レスポンス (100–199),
成功レスポンス (200–299),
リダイレクト (300–399),
クライアントエラー (400–499),
サーバエラー (500–599)
https://did2memo.net/2017/01/28/a3-network-error/
【A3（エースリー）】「通信エラー」「タイムアウトエラー」等のエラーの発生と対策について
http://accel-archives.intra-mart.jp/2015-spring/document/iap/public/im_ui/im_design_guideline_pc/texts/error/ajax_error.html

https://iwb.jp/jquery-click-distinction/
jQueryを使用して1回目、2回目、2回目以降のクリックを判別する方法

[jQuery]非同期通信でsubmit-btnが2回目以降押せない件...
https://qiita.com/nkekisasa222/items/7849ceb0e0dcbcdc3100
https://qiita.com/HrsUed/items/795799f511f5717c181a
　〜中略〜
$.ajax({
　〜中略〜
}).done((data) => {
const html = buildHTML(data);
$(".messages").append(html);
$(".form_text").val("");
}).fail(() => {
alert("メッセージの送信に失敗しました。");
})
//　ここから
.always(() => {
$(".form_submit").removeAttr("disabled");
});
// ここまで追加
　〜中略〜
jQueryでイベントが発火しない場合の対応
https://qiita.com/sho91/items/22279a44499aebd7b49a
【JQuery】click()とon(click)の違い
https://www.flatflag.nir87.com/var-2219#i-10
セレクタに変数を使う

0

2Answer

Jin_o
@Jin_o

コメントさせていただきます。

なるべくですが、MVCモデルに合わせて記述するとコードが一段と読みやすくなるかと思います。
（Viewにはロジックを書かないのが基本）

で、Ajaxについてですが、send.phpで全部echoで書いていると思うのですが、

$.ajax({
        type: "POST",
        url: "send.php",
        data: senddata

      }).done(function(data) {
        // var result = $(data).find('.comment, .datetime');
        console.log(data);

このconsole.logで出たログを出力してください。

あと、とても縦長で見にくいので、githubのソースのURL貼るだけで、わからない部分のソースコードのみを貼るようにしてくださるとみやすいかと...。

2Like

Comments

  1. @toukanno

    Questioner

    まだMVCモデルを使ったことがないです

  2. @Jin_o

    すいません。MVCモデルに関しては、そのうち学んでいくと思います。


    function send(data) {
    console.log(data);
    var senddata = {
    request: data
    };
    console.log(data);
    $.ajax({
    type: "POST",
    url: "send.php",
    data: senddata

    }).done(function(data) {
    // var result = $(data).find('.comment, .datetime');
    console.log(data);
    // console.log(result);
    // console.log(result[0]);
    // console.log(result[1]);
    console.warn(data);
    // $('#comment').html(result[0]);
    // $('#datetime').html(result[1]);
    // $('#table').append(data);
    $('#table').html(data);
    // $('#sendvalue').append(result[0]);
    // $('#sendvalue').append(result[1]);
    // $('#datetime').append(result[1]);
    }).fail(function() {
    alert("error");
    });

    }

    とりあえず、こちらのコードでのconsole.log(data);で出力された結果を
    教えていただけますか？

  3. @Jin_o

    console.logの結果見ました。

    内容取れて、出力まで行っていませんか？

    解決しているのでは...？

  4. @toukanno

    Questioner

    そうですね質問の内容が悪いですね
    最初は出力できませんでした　なのでこの質問内容でした
    今は、修正したのを上げていて出力はできています
    内容は変わっていましたが質問が変わっていなかったのですいません


    なぜなら
    $(document).ready(function(){
    //何かしらの処理
    });
    を使っていたのでうまくいきませんでした
    もし
    $(function(){
    //なにかしらの処理
    });
    を使って
    HTMLを読み込んだ後にアクションを起こすことは可能なのでしょうか？

  5. @toukanno

    Questioner

    イベントハンドラを使ってAjax通信がしたいです

  6. @Jin_o

    > 内容は変わっていましたが質問が変わっていなかったのですいません

    新たにQ&AS立て直したほうが回答来るかと思います。

    > HTMLを読み込んだ後にアクションを起こすことは可能なのでしょうか？

    内容そのまま調べれば山ほど出てきます。
    調べてから、質問するようにしましょう。
    https://www.google.com/search?q=HTML%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A0%E5%BE%8C%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%B5%B7%E3%81%93%E3%81%99&rlz=1C1GCEU_jaJP842JP842&oq=HTML%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A0%E5%BE%8C%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%B5%B7%E3%81%93%E3%81%99&aqs=chrome..69i57&sourceid=chrome&ie=UTF-8

  7. @toukanno

    Questioner

    調べてから質問したのです。　イベントハンドラを使うときはクラスやIDを指定するので　この場合PHPのほうで一意の値を付けなければならないのが難しいのと　読み込んでからアクションを起こすとうまくいかなかったのでどのようにすればよいかなと思い質問しました

Comments

  1. @toukanno

    Questioner

    consoleの出力結果です

Your answer might help someone💌

LoginSign Up