php+mysql+ajax 局部刷新點贊/取消點贊功能(每個賬號只點贊一次)
記錄每個贊的點贊用戶，以及對贊的數量統計首先判斷用戶是否點贊。根據是否點贊，載入不同的html，調用不同的方法
已點贊
如果已點贊，顯示已點贊的html，進行取消點贊操作
未點贊
如果未點贊，顯示未點贊的html，進行點贊操作
對于不同操作，對數據庫進行增加或減少操作。同時對于不同用戶的點贊，進行增加記錄或刪除記錄操作。通過控制不同按鈕的背景，來顯示不同的效果。通過記錄不同用戶的用戶id和贊的id之間的關系，進行不同點贊的限制。
效果演示
當用戶id為1時，進行點贊，點贊數加1
更改用戶id,當id為2時，用戶1的用戶已進行了點贊，點贊數在用戶1點贊基礎上增加1
數據庫
數據庫，分為兩個數據表。一個進行對點贊數的統計，一個進行不同用戶的點贊記錄。
兩個數據表的詳細信息
連接數據庫
$con = new mysqli(’localhost’,’root’,’’,’test’);if (!$con){ die(’連接數據庫失敗，失敗原因：’ . mysqli_error());}else { // echo '連接成功';}
對用戶是否點贊進行判斷（操作頁面）
對數據庫的信息進行提取
//假設用戶編號為1$uId='1';//假設贊編號為1$zanId='1';//查找贊id為1的點贊數$count=mysqli_query($con, 'SELECT count FROM zanCount WHERE zanId=$zanId ');$countResult=mysqli_fetch_array($count);$countZan=$countResult[’count’];//查找改用戶是否對贊id為1 點贊$uIdLike=mysqli_query($con, 'SELECT * FROM zanRecord WHERE uId=$uId ');$result=mysqli_fetch_array($uIdLike);
對用戶是否點贊進行判斷，并輸出不同的html
//點贊if (isset($result)) { $showZan.=<<<html <div id='dolikeDIV'> <button οnclick='zanDel()'></button> <span id='zan'>$countZan</span> </div>html; }//沒點贊else{ $showZan.=<<<html <div id='dolikeDIV'> <button οnclick='zan()'></button> <span id='zan'>$countZan</span> </div>html;}echo $showZan; ?>
css樣式
#dolike, #donolike { width:30px; height:30px; margin-left:20px; float:left;}#donolike {background:url(./images/nolike.png); background-size:30px 30px; }#dolike{background:url(./images/like.png); background-size:30px 30px; }
調用的ajax方法
傳遞需要的數據，這里傳遞的時zanId 和uId記得引入jq文件點贊
function zan(){$.ajax({type:'POST',url:'./likeSever.php',data:{’zanId’:$('#zanId').val(),’uId’:$('#uId').val()},success:function(text){$('#dolikeDIV').html(text);}});}
取消點贊
function zanDel(){$.ajax({type:'POST',url:'./disSever.php',data:{’zanId’:$('#zanId').val(),’uId’:$('#uId').val()},success:function(text){$('#dolikeDIV').html(text);}});}
處理代碼
點贊處理
//更新贊總數的數據 mysqli_query($con,'UPDATE zanCount SET count = count+1 WHERE zanId=$zanId'); //添加一條點贊記錄 mysqli_query($con,'INSERT INTO zanRecord(zanId,uId) VALUES($zanId, $uId); '); //查找贊的總數 @$count=mysqli_query($con, 'SELECT count FROM zanCount WHERE zanId=$zanId '); @$countResult=mysqli_fetch_array($count); @$countZan=$countResult[’count’]; //更改輸出的html $show=''; $show=<<<html <button οnclick='zanDel()'></button><span id='zan'>$countZan</span>html; echo $show;
取消點贊處理
//更新贊總數的數據 mysqli_query($con,'UPDATE zanCount SET count = count-1 WHERE zanId=$zanId'); //添加一條點贊記錄 mysqli_query($con,'DELETE FROM zanRecord WHERE zanId=$zanId AND uId=$uId '); //查找贊的總數 @$count=mysqli_query($con, 'SELECT count FROM zanCount WHERE zanId=$zanId '); @$countResult=mysqli_fetch_array($count); @$countZan=$countResult[’count’]; //更新html $show=''; $show.=<<<html <button οnclick='zan()'></button><span id='zan'>$countZan</span>html;
點贊的圖片圖片自己畫的，有點不太美觀
jq下載地址完整demo下載
到此這篇關于php+mysql+ajax 局部刷新點贊/取消點贊功能(每個賬號只點贊一次)的文章就介紹到這了,更多相關php+mysql+ajax 局部刷新點贊內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. Android打包篇:Android Studio將代碼打包成jar包教程2. Python使用urlretrieve實現直接遠程下載圖片的示例代碼3. 完美解決vue 中多個echarts圖表自適應的問題4. SpringBoot+TestNG單元測試的實現5. vue實現web在線聊天功能6. 解決Android Studio 格式化 Format代碼快捷鍵問題7. 基于vue 動態菜單 刷新空白問題的解決8. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis9. Java使用Tesseract-Ocr識別數字10. Springboot 全局日期格式化處理的實現
網公網安備