PHP+Mysql+Ajax implements Taobao customer service chat function

This article mainly introduces the use of php+mysql+ajax to implement the front-end page of Taobao customer service or Aliwangwang chat function. It is very good and has reference value. Friends who need it can refer to it

First look at Here is the rendering I have achieved:

Consumer page: (this essay)

(1) The shop owner’s avatar will be displayed

(2) The current user sends information Displayed on the right, accepted information is displayed on the left

Store owner or customer service page: (next essay)

(1) on the left There is a list on the side that will display all the customers who have talked with the store owner; the list can be moved; it will prompt when there is a new message; you can also clear the chat history

(2) Click on the customer in the list to enter the conversation on the right Box interface to display the chat information with the customer

Before implementing the function, let me talk about the two tables I used:

Explain: bkid is not used here; the isok column is used to determine whether the message has been read, and unread is 0;

Now, let’s talk about the steps: (divided into front desk and Two parts of the backend)

In this essay, let’s first talk about how the front-end page is implemented: (Li Si logs in)

Use session to save Take lisi; it will be easier to get data from the user table later

1, layout page code and read data code:

<!--中间内容-->
 <p id="zhongjian">
  <p id="kuangjia" style="height: 550px;width: 620px; margin: 0px auto;border: 1px solid gainsboro;background-color: white;">
   <p id="neirong" style="height: 400px;width: 600px;">
    <p style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
  //取店主用户名，显示店主的头像和姓名<br>　　　　　　　　<?php
   $uid = $_SESSION["uid"];  
   $sql = "select * from users where uid=&#39;zhangsan&#39;";
   $arr = $db->query($sql);
   foreach($arr as $v)
   {    
   echo "
   <p style=&#39;height:100px;float:left;width:100px;float:left;&#39;>
    <p style=&#39;border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden&#39;>
    <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/007/578/8b3db968c2faac11a7da3af07193984a-4.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;{$v[6]}&#39; height=&#39;80px&#39;    style="max-width:90%"PHP+Mysql+Ajax implements Taobao customer service chat function" >
    </p>
    </p>
    <p style=&#39;height:100px;width:500px;float:left;&#39;>
    <p style=&#39;height:50px;width:500px;text-align:left;line-height:50px&#39;>
     亲爱的店主
    </p>   
     <p style=&#39;height:50px;width:500px;text-align:left;&#39;>个性签名：
     <input type=&#39;text&#39; placeholder=&#39;不读书怎么对得起今天!&#39; style=&#39;width:280px&#39;>        
    </p>
    </p>
    "; 
   }   
   ?>
   </p>
   <p style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;"><br>         //获取session里存取的uid;
    <?php
     $uid = $_SESSION["uid"];     
     $sql3 = "select * from users where uid=&#39;{$uid}&#39;";
         $arr3 = $db->query($sql3);<br>　　　　　　　　　　　　　　　　　　　　//从对话表里读取店主张三和李四所有的对话信息，并按对话时间顺序排序
     $sql2="select * from duihua where uid=&#39;{$uid}&#39; or jsid=&#39;{$uid}&#39; order by dhtime";     
     $arr2= $db->query($sql2);
     foreach($arr2 as $n)
     {<br>        //如果是店主，则信息要显示在左侧
     if($n[2]==&#39;zhangsan&#39;)
     {
     echo "<p style=&#39;height:100px;width:600px;&#39;>
     <p style=&#39;height:100px;width:250px;float:left&#39;>
      <p style=&#39;height:20px;width:250px;font-size:13px;padding-left:20px&#39;>
        {$n[6]}</p>
      <p style=&#39;height:80px;width:50px;float:left&#39;>
       <p style=&#39;height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/007/578/8b3db968c2faac11a7da3af07193984a-4.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;{$v[6]}&#39; height=&#39;50px&#39;    style="max-width:90%"PHP+Mysql+Ajax implements Taobao customer service chat function" >
       </p>
      </p>
      <p style=&#39;min-height:40px;width:200px;float:left;background-color:cornflowerblue; border-bottom-right-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;&#39;>
       <p style=&#39;padding-left:20px; line-height:40px&#39;>
        {$n[4]}</p>        
      </p>     
     </p></p>";
     } <br>//如果是李四，则显示在右侧    
     if($n[2]==$uid)
     {            
     echo "<p style=&#39;height:100px;width:600px;margin-right:20px&#39;>
     <p style=&#39;height:100px;width:250px; float:right&#39;>
      <p style=&#39;height:20px;width:250px;font-size:13px;padding-right:20px&#39;>
        {$n[6]}</p>
      <p style=&#39;height:80px;width:50px;float:right&#39;>
       <p style=&#39;height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/007/578/8b3db968c2faac11a7da3af07193984a-4.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;{$arr3[0][6]}&#39; height=&#39;50px&#39;    style="max-width:90%"PHP+Mysql+Ajax implements Taobao customer service chat function" >
       </p>
      </p>
      <p style=&#39;min-height:40px;width:200px;float:right;background-color:pink; border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;&#39;>
       <p style=&#39;padding-left:20px; line-height:40px&#39;>
        {$n[4]}</p>        
      </p>     
     </p></p>"; 
     }          
     }  
     ?>   
   </p>  
   </p> <!--id="neirong"--><br>
  <form role="form">
   <p class="form-group">
   <textarea class="form-control" rows="3" id="words"></textarea> //输入发送内容
   </p>
  </form>
  <p id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;">
  <button type="button" class="btn btn-success fasong">发送</button>  //点击按钮发送
  </p>
  </p>   
  </p> <!--id=zhongjian--> 　　

Achievement effect:

2. Ajax code when clicking send:

<script>
 $(".tc").click(function(){
  $("#kuangjia").show();  
 })
  $(".fasong").click(function(){
  var nr=$("#words").val();
  $.ajax({
   url:"qt-speak-cl.php",
   data:{words:nr},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
    if(data==1)
    {
    window.location.href="qt-dh.php" rel="external nofollow" rel="external nofollow" ; 
    }
    else{
     alert("发送内容不能为空！");
    }
    }
  })
 }) 
  $("#dh").click(function(){
  $.ajax({
   url:"qt-yidu-cl.php",
   dataType:"TEXT",
   success: function(data){
//    alert(data);     
    window.location.href="qt-dh.php" rel="external nofollow" rel="external nofollow" ;    
   }   
  })
 })
</script>

3. qt-speak-cl.php page:

<?php
session_start();
require "DBDA.class.php";
$db = new DBDA(); 
$uid = $_SESSION["uid"];
$words =$_POST["words"];
$chtime=date("Y-m-d H:i:s",time());
$jieshou = "zhangsan";
if(!empty($words))
{
$sql="insert into duihua values (&#39;&#39;,&#39;{$jieshou}&#39;,&#39;{$uid}&#39;,&#39;&#39;,&#39;{$words}&#39;,0,&#39;{$chtime}&#39;)";
echo $db->query($sql,0);
<em id="mceDel">}
else
{ 
 echo "发送内容不能为空！";
}
?>
</em>

If the sending content is empty, it will prompt "Send content It cannot be empty! ”

The front page will display different information according to different user login; let Wang Wu log in to see:

The above is the PHP+Mysql+Ajax introduced by the editor to implement Taobao customer service or Aliwangwang chat function (front page). I hope it will be helpful to you. If you have any questions Please leave me a message and I will reply to you in time. I would also like to thank everyone for your support of the Script House website!

The above is the detailed content of PHP+Mysql+Ajax implements Taobao customer service chat function. For more information, please follow other related articles on the PHP Chinese website!