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的栏目导航程序
Oct 09 PHP
让你的网站首页自动选择语言转跳
Dec 06 PHP
phpmyadmin MySQL 加密配置方法
Jul 05 PHP
PHP利用MySQL保存session的实现思路及示例代码
Sep 09 PHP
php将csv文件导入到mysql数据库的方法
Dec 24 PHP
PHP实现移除数组中为空或为某值元素的方法
Jan 07 PHP
PHP中使用OpenSSL生成证书及加密解密
Feb 05 PHP
laravel 5.3中自定义加密服务的方案详解
May 09 PHP
thinkphp3.2实现在线留言提交验证码功能
Jul 19 PHP
php设计模式之单例模式用法经典示例分析
Sep 20 PHP
PHP实现倒计时功能
Nov 16 PHP
PHP实现腾讯短网址生成api接口实例
Dec 08 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
让您的菜单不离网站
2006/10/03 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
实例讲解Python爬取网页数据
2018/07/08 Python
如何通过Python实现标签云算法
2019/07/02 Python
如何使用python切换hosts文件
2020/04/29 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android