PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)


Posted in PHP onJune 16, 2017

首先来看一下我已经实现的效果图:

消费者页面:(本篇随笔)

(1)会显示店主的头像

(2)当前用户发送信息显示在右侧,接受的信息,显示在左侧

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

店主或客服页面:(下一篇随笔)

(1)在左侧有一个列表 ,会显示所有与店主对话的顾客;该列表可以移动;有新消息时会提示;也可以清空该聊天记录

(2)点击列表里的顾客进入右边的对话框界面,显示与该顾客的聊天信息

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

 在实现功能之前,来说一下我用到的两张表:

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

 解释一下:bkid在此处没有用到;isok列是用来判断消息是否已读,未读为0;

现在,来说一下步骤:(分前台和后台两部分)

在这篇随笔中我们首先来说一下前台页面是如何实现的:(李四登录)

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

用session存取一下lisi;便于后面从user表中取数据

1、布局页面代码以及读取数据代码:

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

实现效果:

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

2、点击发送时的ajax代码:

<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页面:

<?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 ('','{$jieshou}','{$uid}','','{$words}',0,'{$chtime}')";
echo $db->query($sql,0);
<em id="__mceDel">}
else
{ 
 echo "发送内容不能为空!";
}
?>
</em>

 如果发送内容为空,则会提示“发送内容不能为空!”

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

前台页面会随不同用户登录显示不同的信息;让王五登录看看:

PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)

以上所述是小编给大家介绍的PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
php4的session功能评述(三)
Oct 09 PHP
PHP伪静态页面函数附使用方法
Jun 20 PHP
php设计模式 Observer(观察者模式)
Jun 26 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
Apr 22 PHP
PHP程序员必须清楚的问题汇总
Dec 18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
Dec 14 PHP
PC端微信扫码支付成功之后自动跳转php版代码
Jul 07 PHP
实例讲解YII2中多表关联的使用方法
Jul 21 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
Nov 17 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
Dec 31 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
Jan 23 PHP
Memcached介绍及php-memcache扩展安装
Apr 01 PHP
php使用str_replace替换多维数组的实现方法分析
Jun 15 #PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
Jun 15 #PHP
php7基于递归实现删除空文件夹的方法示例
Jun 15 #PHP
php实现的二叉树遍历算法示例
Jun 15 #PHP
深入浅析PHP的session反序列化漏洞问题
Jun 15 #PHP
PHP中phar包的使用教程
Jun 14 #PHP
iis 7下安装laravel 5.4环境的方法教程
Jun 14 #PHP
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
第一节--面向对象编程
2006/11/16 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python使用functools实现注解同步方法
2018/02/06 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python3调用windows dos命令的例子
2019/08/14 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Python 在局部变量域中执行代码
2020/08/07 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
党校学习思想汇报
2014/01/06 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
员工工作能力评语
2014/12/31 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
督导岗位职责
2015/02/04 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技