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 相关文章推荐
PHP IN_ARRAY 函数使用注意事项
Jul 24 PHP
基于PHP生成静态页的实现方法
May 10 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
Jun 20 PHP
php获取客户端电脑屏幕参数的方法
Jan 09 PHP
php绘制一条直线的方法
Jan 24 PHP
Thinkphp调用Image类生成缩略图的方法
Mar 07 PHP
详解PHP数组赋值方法
Nov 07 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
Sep 11 PHP
php类自动装载、链式操作、魔术方法实现代码
Jul 23 PHP
PHP排序二叉树基本功能实现方法示例
May 26 PHP
浅谈PHP中的那些魔术常量
Dec 02 PHP
通过代码实例解析PHP session工作原理
Dec 11 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
php adodb介绍
2009/03/19 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
详解php用static方法的原因
2018/09/12 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
javascript new一个对象的实质
2010/01/07 Javascript
js function使用心得
2010/05/10 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python基于select实现的socket服务器
2016/04/13 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
10个Python小技巧你值得拥有
2018/09/29 Python
简单了解python的内存管理机制
2019/07/08 Python
python实现XML解析的方法解析
2019/11/16 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
团队激励口号
2014/06/06 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
律师函格式范本
2015/05/27 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
python数据处理之Pandas类型转换
2022/04/28 Python