Graphical code tutorial on how to use PHP+Mysql+Ajax to implement Taobao customer service functions

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=&#39;{$v[6]}&#39; height=&#39;80px&#39; width=&#39;80px&#39;/>
    </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=&#39;{$v[6]}&#39; height=&#39;50px&#39; width=&#39;50px&#39;/>
       </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=&#39;{$arr3[0][6]}&#39; height=&#39;50px&#39; width=&#39;50px&#39;/>
       </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 "The sending content cannot be empty!"

The front page will Different information will be displayed with different users logging in; let Wang Wu log in to see:

The above is the detailed content of Graphical code tutorial on how to use PHP+Mysql+Ajax to implement Taobao customer service functions. For more information, please follow other related articles on the PHP Chinese website!