HTML5仿微信聊天与朋友圈

因工作原因,最近需要一个仿微信朋友圈的功能,一点点写,这个文章不定期更新.

2020-04-17 18:33:56

未来会做一个汇总.

现在做的是点赞功能.

与文章浏览次数大体相同的逻辑,不同点是浏览次数是自动累加的,点赞是需要用户手动点击的.

为了更佳的体验,本次是基于Ajax实现的无刷新点赞功能.

技术栈:PHP+Mysql+Ajax

1)    读取数据库

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>点赞</title>
 6     <script src="jquery-2.1.1.min.js"></script>
 7     <script src="index.js"></script>
 8 </head>
 9 <body>
10     <button id="btn">赞</button>
11     <span id="result">
12         <?php
13         $con = mysqli_connect('localhost', 'username', 'password');
14         if(! $con )
15         {
16             die('连接失败: ' . mysqli_error($con));
17         }
18         mysqli_select_db($con,'jwhuang');
19         mysqli_query($con,"set names utf8");
20         $result = mysqli_query($con,"SELECT * FROM zan");
21         while($row = mysqli_fetch_array($result))
22         {
23         echo $row['zan'];
24         }
25         mysqli_close($con)
26         ?>
27     </span>
28 </body>
29 </html>

 

2)    写入数据库 

 1 <?php
 2 header("Content-type:text/html;charset=utf-8");
 3 $con = mysqli_connect('localhost', 'username', 'password');
 4 if(! $con )
 5 {
 6     die('连接失败: ' . mysqli_error($con));
 7 }
 8 mysqli_select_db($con,'jwhuang');
 9 mysqli_query($con,"set names utf8");
10 mysqli_query($con,"UPDATE zan SET zan = zan+1");
11 $result = mysqli_query($con,"SELECT * FROM zan");
12 if(isset($_GET['name'])){
13 while($row = mysqli_fetch_array($result))
14   {
15   echo $row['zan'];
16   }
17 }else{
18     echo "赞失败！";
19 }
20 mysqli_close($con);
21 ?>

3) 请求数据 

1 $(document).ready(function(){
2     $("#btn").on("click",function(){
3         $.get("sever.php",{name:$("#btn").val()},function(data){
4             $("#result").text(data);
5         });
6     });
7 });

 

 

posted @ 2020-04-17 19:06  陶梦衍  阅读(963)  评论(0)    收藏  举报