消費者頁面：（本篇隨筆）
（1）會顯示店主的頭像
（2）當前用戶發送信息顯示在右側，接受的信息，顯示在左側
店主或客服頁面：（下一篇隨筆）
（1）在左側有一個列表 ，會顯示所有與店主對話的顧客；該列表可以移動；有新消息時會提示；也可以清空該聊天記錄
（2）點擊列表里的顧客進入右邊的對話框界面，顯示與該顧客的聊天信息
在實現功能之前，來說一下我用到的兩張表：
解釋一下：bkid在此處沒有用到；isok列是用來判斷消息是否已讀，未讀為0；
現在，來說一下步驟：（分前臺和后臺兩部分）
在這篇隨筆中我們首先來說一下前臺頁面是如何實現的：（李四登錄）
用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> <div> <img src='http://www.3lian.com/edu/2017/06-16/{$v[6]}'/> </div> </div> <div> <div> 親愛的店主 </div> <div>個性簽名： <input type='text' placeholder='不讀書怎么對得起今天!'> </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> <div> <div> {$n[6]}</div> <div> <div> <img src='http://www.3lian.com/edu/2017/06-16/{$v[6]}'/> </div> </div> <div> <p> {$n[4]}</p> </div> </div></div>"; } <br>//如果是李四，則顯示在右側 if($n[2]==$uid) { echo "<div> <div> <div> {$n[6]}</div> <div> <div> <img src='http://www.3lian.com/edu/2017/06-16/{$arr3[0][6]}'/> </div> </div> <div> <p> {$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-->
實現效果：
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頁面：