Php + ajax + jquery + mysql

Bonjour,

Actuellement je réalise un projet de développement web, je cherche à implémenter une salle de discussion en utilisant PHP avec fonctionnalités de chat privé.

Le problème est de savoir comment mettre à jour continuellement l'interface de manière naturelle et éventuellement comment afficher les messages «X est-ce que vous tapez …» dans un chat privé sans que la page web se recharge.

J'ai réussi a faire en sorte d'écrire le message et de le recevoir et afficher les messages mais le problème la page ce recharge tout le temps. J'ai pensé à utiliser ajax mais je ne sais pas comment m'y prendre. Je suis nouveaux dans le développement web.

J'ai beau avoir vu plusieurs forums et tutoriels, mais aucun moyen d'afficher les messages sans recharger la page web.

Merci à tous.

   <?php
ob_start();
require_once '../core/init.php';
if(!is_logged_in()){
    header('Location: login.php');
  }
$user_id = $_SESSION["id"];
include 'includes/head.php';
include 'includes/navigation.php';
 
$chatbox = ((isset($_POST['chatbox']) && $_POST['chatbox'] != '')?sanitize($_POST['chatbox']):'');
$errors = array();
$fourusers_id = ((isset($_GET['fourusers_id']) && !empty($_GET['fourusers_id']))?sanitize((int)$_GET['fourusers_id']):'');
$fourusersQuery = $db->query("SELECT * FROM fourusers WHERE id = '{$fourusers_id}'");
$achusersQuery = $db->query("SELECT * FROM achusers WHERE id = '{$user_id}'");
$achusers_chat = mysqli_fetch_assoc($achusersQuery);
$tableachusers = $db->query("SHOW TABLES FROM ealomedb");
$row = mysqli_fetch_row($tableachusers);
//$by_message = 'fourusers'; pour fourusers folder
 
if (isset($_POST['submit'])) {
  if (isset($_POST['submit']) && empty($chatbox)) {
    $errors[] = 'You must fill out a word.';
  }
  //check for errors
  if(!empty($errors)) {
    echo display_errors1($errors);
  }else {
    //display the message in the data base
    $db->query('INSERT INTO chat SET `message` = "'.$chatbox.'", `aid` = "'.$user_id.'", `fid` = "'.$fourusers_id.'", `by_message` = "'.$row['0'].'" ');//UPDATE `chat` SET `message` = '$chatbox' WHERE `chat`.`aid` = '$user_id' AND `chat`.`fid` = '$fourusers_id'
  }
}
 
?>
 
 
<br><br>
<div class="container">
    <div class="row">
      <div class="col-md-3 pull-left">
        <form class="form-inline">
          <div class="form-group">
            <input type="text" style="width:102% !important;" class="form-control" placeholder="search" />
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <br>
        <div class="panel panel-info">
          <ul class="list-group">
            <a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
             <h4>brad pitt</h4><!--<span class="badge">2</span>-->
            </a>
 
            <a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
             <h4>yo pitt</h4><!--<span class="badge">2</span>-->
            </a>
 
            <a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
             <h4>mom</h4><!--<span class="badge">2</span>-->
            </a>
 
            <a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
             <h4>dad</h4><!--<span class="badge">2</span>-->
            </a>
          </ul>
        </div>
      </div>
 
 
 
        <div class="col-md-8 pull-right">
          <?php if(empty($fourusers_id)):
            $errors[] = "Don’t have a new message or open your message";
            if(!empty($errors)) {
              echo display_errors1($errors);}?>
          <?php else:?>
            <?php while($fourusers_chat = mysqli_fetch_assoc($fourusersQuery)):
                $chatdb = $db->query("SELECT * FROM chat WHERE aid = '$user_id' AND fid = '$fourusers_id' ORDER BY `time` ASC"); ?>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-comment"></span> <?=$fourusers_chat['user_name'];?>
                </div>
                <div class="panel-body" id="chatbb">
                    <ul class="chat">
                      <?php while($messageAssoc = mysqli_fetch_assoc($chatdb))://display message?>
                        <?php if($messageAssoc['by_message'] == 'achusers'):?>
                      <div class="alert alert-info messBox" role="alert" id="<?=$messageAssoc['id']; ?>">
                        <li class="right clearfix"><span class="chat-img pull-right">
                            <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                  <small class=" text-muted"><span class="glyphicon glyphicon-time"></span><?=$messageAssoc['time'];?></small>
                                  <strong class="pull-right primary-font"><?=$achusers_chat['full_name'];?></strong>
                                </div>
                                <p id="messajax">
                                    <?=$messageAssoc['message'] ;?>
                                </p>
                            </div>
                        </li>
                      </div>
                    <?php endif; ?>
                    <?php if($messageAssoc['by_message'] == 'fourusers'): ?>
                      <div class="alert alert-success messBox" role="alert" id="<?=$messageAssoc['id'] ;?>">
                        <li class="left clearfix"><span class="chat-img pull-left">
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                  <strong class="primary-font"><?=$fourusers_chat['user_name'];?></strong> <small class="pull-right text-muted">
                                      <span class="glyphicon glyphicon-time"></span><?=$messageAssoc['time'];?></small>
                                </div>
                                <p id="messajax">
                                    <?=$messageAssoc['message'] ;?>
                                </p>
                            </div>
                        </li>
                      </div>
                    <?php endif;?>
                      <?php endwhile; ?>
                    </ul>
                </div>
                <div class="panel-footer">
                  <form method="post" id="chatB" action="chat.php?fourusers_id=<?=$fourusers_chat['id'];?>">
                    <div class="input-group has-success">
                        <input id="btn-input" type="text" class="form-control input-sm" name="chatbox" class="chatbox" id="inputSuccess1" placeholder="Type your message here..." />
                        <span class="input-group-btn">
                            <button style="width:130%;" class="btn btn-info btn-sm" id="btn-chat" name="submit" value="Send">Send</button>
                        </span>
                    </div>
                  </form>
                </div>
            </div>
          <?php endwhile;?>
          <?php endif;?>
        </div>
    </div>
</div>
 
<style>
.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}
</style>
 
<script>
 
$(document).ready(function(){
 
  $('#btn-chat').click(function(){
    //var clientmsg = $(".chatbox").val();
    $ajax({
      url: 'chat.php',
      type: 'POST',
      data: {db:db,chatdb:chatdb},//parameter value to be passed   pt style="display:none;"> .messBox
      dataType: 'json',
      success: function(html){
        $(".messBox").show();
      },
    });
 
  });
 
});
</script>
 
<?php ob_end_flush(); ?>