我想通过单击用户名在同一页面中显示聊天数据

Question

我在联系人列表中显示了用户列表 class 带有包含用户 ID 的 data-id 属性，我想从联系人列表中单击用户并在直接聊天中显示聊天数据-消息 div，我已经编写了 ajax 代码，但它没有显示任何内容。有人可以帮助我哪里出错了。

这是html页面（我删除了样式）

<html>
<head>
<title></title>
</head>
<body>
              <div class="box box-warning direct-chat direct-chat-warning">
            <div class="box-header with-border">
              <h3 class="box-title">Direct Chat</h3>

              <div class="box-tools pull-right">
                <span class="badge bg-yellow">3</span>
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Users" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <!-- Conversations are loaded here -->
              <div class="direct-chat-messages">


              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div class="direct-chat-contacts">
                <ul class="contacts-list">

                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
              <form action="#" method="post" class="chat-typing">
                <div class="input-group">
                  <input type="text" name="incoming_id" value="" class="form-control incoming_id">
                  <input type="text" name="outgoing_id" value="1" class="form-control">
                  <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                  <span class="input-group-btn">
                        <button type="button" class="btn btn-warning btn-flat">Send</button>
                      </span>
                </div>
              </form>
            </div>
            <!-- /.box-footer-->
          </div>
<script src="../system/ajax/chat/chat.js"></script>
</body>
</html>

这是我提取用户列表数据的脚本 chat.js，但我卡在 onclick 函数上，该函数提取特定记录的聊天记录。

 const usersList = document.querySelector(".contacts-list"),
element = document.getElementById('#user'),
dataID = $('#elementId').getAttribute('data-id'),
chatBox = document.querySelector(".direct-chat-messages");
element.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "../system/ajax/chat/getChat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
            let data = xhr.response;
            console.log(data);
            //chatBox.innerHTML = data;
          }
      }
    }
    //let formData = new FormData(form);
    xhr.send(dataID);
}

setInterval(() =>{
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "../system/ajax/chat/getChatUsers.php", true);
  xhr.onload = ()=>{
    if(xhr.readyState === XMLHttpRequest.DONE){
        if(xhr.status === 200){
          let data = xhr.response;
          //console.log(data);
          usersList.innerHTML = data;
          /*if(!searchBar.classList.contains("active")){
            usersList.innerHTML = data;
          }*/
        }
    }
  }
  xhr.send();
}, 500);

这是 getChat.php 代码，我使用 data-id 属性从 mysql 服务器提取特定用户的聊天记录。

function GetChat()
{
    global $dbc;
    session_start();
    if(isset($_SESSION['username'])){
        $incoming_id = mysqli_real_escape_string($dbc, $_POST['dataId']);
        $output = "";

        $q = " SELECT * FROM chat WHERE (out_msg_id = '1' AND in_msg_id = '$incoming_id') OR (out_msg_id = '$incoming_id' AND in_msg_id = '1') ORDER BY msg_id ";  
        $r = mysqli_query($dbc, $q);
        if(mysqli_num_rows($r) > 0){
            while($row = mysqli_fetch_assoc($r)){
                if($row['out_msg_id'] === $outgoing_id){ //if this is equals to then he is a sender
                    $output .= '<div class="msg-outgoing">
                                    <div class="msg-info clearfix">
                                        <span class="msg-name pull-right">You</span>
                                        <span class="msg-timestamp pull-left">'.date("dM y h:ia", strtotime($row['msg_dt'])).'</span>
                                    </div> 
                                    <!--<img class="msg-img" src="../source/images/you3.png" alt="message user image">-->
                                    <div class="msg-text"> '.$row['msg'].' </div>
                                </div>';
                }else{ //he is a receiver
                    $output .= '<div class="msg-incoming">
                                    <div class="msg-info clearfix">
                                        <span class="msg-name pull-left">Admin</span>
                                        <span class="msg-timestamp pull-right">'.date("dM y h:ia", strtotime($row['msg_dt'])).'</span>
                                    </div>
                                    <!--<img class="msg-img" src="../source/images/admin3.png" alt="message user image">-->
                                    <div class="msg-text"> '.$row['msg'].' </div>
                                </div>';
                }
            }
            echo $output;
        }

    }else{
        header('Location: ../');
    }
    exit();
}

Answer 1

更换你的 JS：

const usersList = document.querySelector(".contacts-list");
const element = document.getElementById('user');
const dataID = element.getAttribute('data-id');
const chatBox = document.querySelector(".direct-chat-messages");
element.onclick = ()=>{
    $.ajax({
      url:"../system/ajax/chat/getChat.php",
      cache:false,
      data:"dataId="+encodeURIComponent(dataID),
      type:"post",
      success: function(data){
          console.log(data);
          chatBox.innerHTML = data;
          //whatever you are gonna do
      }
    });
}

setInterval(()=>{
  $.ajax({
      url:"../system/ajax/chat/getChatUsers.php",
      cache:false,
      type:"get",
      success: function(data){
          console.log(data);
          usersList.innerHTML = data;
          if(!searchBar.classList.contains("active")){
            usersList.innerHTML = data;
          }
          //whatever you are gonna do
      }
    });
}, 2000);

请注意，当您每 500 毫秒开始请求时，大多数服务器会阻止您的请求以防止 (D)DoS。

我想通过单击用户名在同一页面中显示聊天数据

I want to display chat data in same page by clicking user name

ajax