AJAXを使用してリアルタイムでSQL selectクエリを実行するにはどうすればよいですか？

Question

私は現在、学校プロジェクトのためにPHPでコメントシステムを構築していますが、問題が発生しました。私は、ユーザーがリフレッシュせずに挿入されたコメントを投稿できるようにしたい。私はこれを働かせた。また、ユーザーが投稿したばかりのコメントを含め、すべてのコメントを読み込むようにしたい。

私は後者を行う方法がわからないので、ここでアドバイスやヒント/例を求めています。

これは現在の投稿のすべてのコメントを読み込むために使用しているコードです。それはうまくいっていますが、私はこれを何とかAJAXのコードと置き換えて同じようにしたいのですが、「リアルタイム」にしたいと思います。

include('dbconnect.php'); 
$stmt = $db->prepare(" 
SELECT c.comments_id, c.time, c.comment, c.date, c.posts_id, c.users_id, users.users_id, users.name, users.surname, users.profilepicture 
FROM `comments` as c k 
INNER JOIN users ON c.users_id = users.users_id 
WHERE c.posts_id = ".$row["posts_id"]); 
$stmt->execute(); 
$amtResults = $stmt->rowCount(); 
$results = $stmt->fetchAll(PDO::FETCH_ASSOC); 
foreach ($results as $row) { 
    echo '<div class="row"> 
      <div class="column column-1"> 
       <img style="padding-left:5px;padding-top:5px; height: 30px; width: 30px;" class ="commentuppic" src="/uploads/'.$row["profilepicture"].'" alt="Profile picture"> 
      </div> 
      <div class="column column-9"> 
       <p id="replytext"> 
        <a href="profilefriend.php?user_id='.$row["users_id"].'">'.$row["name"].' '.$row["surname"].'</a>:<br> 
       '.$row["comment"].' 
       </p> 
      </div> 
      <div class="column column-1"> 
       <form method="post"> 
        <button type="submit" style="width: auto;" name="delete_comment" ><span class="fa fa-trash-o"></span></button> 
        <input type="hidden" name="comments_id" value="'.$row["comments_id"].'" /> 
       </form> 
      </div> 
     </div>'; 
} 

それが必要だ場合は、ここで私は、データベースにコメントを挿入するために使用されるコードです：

 $("form[name='submit_comment']").submit(function (e) { 
      //do whatever you want to do when submitting comment 
      var comment = $('#comment').val(); 
      var post_id = $('#post_id').val(); 
      $.ajax({ 
       url: 'insertmessage.php', 
       //async: true, 
       //cache: false, 
       data: {comment:comment, post_id:post_id}, 
       type: 'POST',   
      }); 

     return false; 
     }); 

とinsertmessage.php：

if($_POST["comment"]){ 
    include('dbconnect.php'); 
    // set the PDO error mode to exception 
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

    // prepare sql and bind parameters 
    $stmt = $db->prepare('INSERT INTO comments (date, time, comment, posts_id, users_id) VALUES (:date, :time, :comment, :posts_id, :users_id)'); 
    $date = date("Y/m/d"); 
    $time = date("h:i:sa"); 
    $stmt->bindValue(':date', $date, PDO::PARAM_STR); 
    $stmt->bindValue(':time', $time, PDO::PARAM_STR); 
    $stmt->bindValue(':comment', $_POST["comment"], PDO::PARAM_STR); 
    $stmt->bindValue(':posts_id', $_POST['post_id'], PDO::PARAM_INT); 
    $stmt->bindValue(':users_id', $_SESSION['users_id'], PDO::PARAM_INT); 
    $stmt->execute(); 
    $db= null; 
    header('Location: profile.php'); 
} 

すべてのヘルプは歓迎です！

Answer 1

コメントがデータに正常に挿入された後、ページに追加するだけです。これは$.ajax()機能でsuccessコールバックで行われることになります。

$.ajax({ 
    url: 'insertmessage.php', 
    data: {comment:comment, post_id:post_id}, 
    type: 'POST', 
    success: function (response) { 
     // here you would add it to the page 
    } 
}); 

（エラーレスポンスを処理するためerrorコールバックもあります何かがうまくいかない場合は、ユーザーに通知することができますので、あなたにもそれに見てみたいことがあります。

あなたはすでにcommentの値を持っていますので、サーバーから必要な追加情報がない限り、コールバックのresponseを無視することができます。しかし、がという情報がサーバーから必要な場合は、それを取得します。

レスポンスには何も書き込まれません。リダイレクトを返します.AJAXリクエストは基本的に無視します。データを返す場合は、あなたが他のどのPHPページ（AJAXレスポンスの代わりにjson_encode()を使用するのが望ましい）と同じようにレスポンスに書き込む必要があります。

ページにコメントを表示する方法はあなた次第です。それはページのHTMLとコメントを追加する場所によって異なります。しかし、jQueryを使用しているので、かなり簡単になるはずです。たとえば、あなたが知られている要素にコメントを追加したい場合、あなたはそれが好きで追加できます：

おそらくあまりにも単純化されたのです

var existingComments = $('#someElement').text(); 
$('#someElement).text(existingComments + comment); 

、うまくいけばあなたのアイデアを得ます。または、新しい要素にコメントをラップして何かに追加するかもしれません：

$('#someElement').append('<div>' + comment + '</div>'); 

本当に無数の可能性があります。しかし、主なポイントは、AJAX呼び出しのsuccessコールバックでこれを行うことです。基本的には、動作の順序は次のようになります。

2. 成功を返し、データベースに挿入し、サーバ
3. にコメントを送信リロード部分のページ

Answer 2

にコメントを追加「成功」機能を使用します。 文書：http://api.jquery.com/jquery.ajax/

.load（）を使用してページを更新せずにコンテンツをリロードします。 ドク：http://api.jquery.com/load/

あなたのコードは次のようになります。

$("form[name='submit_comment']").submit(function (e) { 
      //do whatever you want to do when submitting comment 
      var comment = $('#comment').val(); 
      var post_id = $('#post_id').val(); 
      $.ajax({ 
       url: 'insertmessage.php', 
       //async: true, 
       //cache: false, 
       data: {comment:comment, post_id:post_id}, 
       type: 'POST', 
       success : function(code_html, statut){ 
        $('#your_comment_container').load(document.URL + ' #your_comment_container'); 
       } 
      }); 

     return false; 
     });