


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='zhangsan'"; $arr = $db->query($sql); foreach($arr as $v) { echo " <p style='height:100px;float:left;width:100px;float:left;'> <p style='border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden'> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/007/559/7c1d27c53bcd84e05bd111415c960b17-4.png?x-oss-process=image/resize,p_40" class="lazy" src='{$v[6]}' height='80px' style="max-width:90%"PHP example-PHP+Mysql+Ajax implements Taobao customer service or Aliwangwang chat function (front page)" > </p> </p> <p style='height:100px;width:500px;float:left;'> <p style='height:50px;width:500px;text-align:left;line-height:50px'> 亲爱的店主 </p> <p style='height:50px;width:500px;text-align:left;'>个性签名: <input type='text' placeholder='不读书怎么对得起今天!' style='width:280px'> </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='{$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 "<p style='height:100px;width:600px;'> <p style='height:100px;width:250px;float:left'> <p style='height:20px;width:250px;font-size:13px;padding-left:20px'> {$n[6]}</p> <p style='height:80px;width:50px;float:left'> <p style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/007/559/7c1d27c53bcd84e05bd111415c960b17-4.png?x-oss-process=image/resize,p_40" class="lazy" src='{$v[6]}' height='50px' style="max-width:90%"PHP example-PHP+Mysql+Ajax implements Taobao customer service or Aliwangwang chat function (front page)" > </p> </p> <p 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> </p> </p></p>"; } <br>//如果是李四,则显示在右侧 if($n[2]==$uid) { echo "<p style='height:100px;width:600px;margin-right:20px'> <p style='height:100px;width:250px; float:right'> <p style='height:20px;width:250px;font-size:13px;padding-right:20px'> {$n[6]}</p> <p style='height:80px;width:50px;float:right'> <p style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/007/559/7c1d27c53bcd84e05bd111415c960b17-4.png?x-oss-process=image/resize,p_40" class="lazy" src='{$arr3[0][6]}' height='50px' style="max-width:90%"PHP example-PHP+Mysql+Ajax implements Taobao customer service or Aliwangwang chat function (front page)" > </p> </p> <p 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> </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 ('','{$jieshou}','{$uid}','','{$words}',0,'{$chtime}')"; 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 detailed content of PHP example-PHP+Mysql+Ajax implements Taobao customer service or Aliwangwang chat function (front page). For more information, please follow other related articles on the PHP Chinese website!

php把负数转为正整数的方法:1、使用abs()函数将负数转为正数,使用intval()函数对正数取整,转为正整数,语法“intval(abs($number))”;2、利用“~”位运算符将负数取反加一,语法“~$number + 1”。

实现方法:1、使用“sleep(延迟秒数)”语句,可延迟执行函数若干秒;2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句,可延迟执行函数若干秒和纳秒;3、使用“time_sleep_until(time()+7)”语句。

php除以100保留两位小数的方法:1、利用“/”运算符进行除法运算,语法“数值 / 100”;2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值,并保留两位小数。

判断方法:1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式;2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的,因此真实天数需要在此基础上加1。

方法:1、用“str_replace(" ","其他字符",$str)”语句,可将nbsp符替换为其他字符;2、用“preg_replace("/(\s|\ \;||\xc2\xa0)/","其他字符",$str)”语句。

php判断有没有小数点的方法:1、使用“strpos(数字字符串,'.')”语法,如果返回小数点在字符串中第一次出现的位置,则有小数点;2、使用“strrpos(数字字符串,'.')”语句,如果返回小数点在字符串中最后一次出现的位置,则有。

在PHP中,可以利用implode()函数的第一个参数来设置没有分隔符,该函数的第一个参数用于规定数组元素之间放置的内容,默认是空字符串,也可将第一个参数设置为空,语法为“implode(数组)”或者“implode("",数组)”。

php字符串有下标。在PHP中,下标不仅可以应用于数组和对象,还可应用于字符串,利用字符串的下标和中括号“[]”可以访问指定索引位置的字符,并对该字符进行读写,语法“字符串名[下标值]”;字符串的下标值(索引值)只能是整数类型,起始值为0。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

Notepad++7.3.1
Easy-to-use and free code editor

Atom editor mac version download
The most popular open source editor

WebStorm Mac version
Useful JavaScript development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
