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 });