一、首先頁面需要載入jquery框架
二、ajax常用引數解釋:
①、type:傳輸資料方式,get或者post
②、url:處理資料的PHP指令碼
③、data:傳輸的資料索引及值,值用js獲取,一般此屬性為json串或字串
④、async:引數為布林型別,預設為true,即非同步傳輸,瀏覽器不鎖定
⑤、complete:引數為方法,跳轉的指令碼執行完成後的回撥函數
⑥、success:引數為方法,跳轉的指令碼執行成功後的回撥函數
⑦、error:引數為方法,跳轉的指令碼執行失敗後的回撥函數
三、指令碼處理完成後將頁面需要的資料return,之後在前端頁面根據需求實現區域性重新整理,而不是進行跳轉重新整理,這是ajax最強大的地方
html程式碼部分:
<?php $id = $_GET['id']; require_once 'mysqlHelper.php'; $db = new mysqlHelper('localhost','root','root','dianzan'); $sql = "select * from news where id = '$id'"; $news = $db->GetOneData($sql); ?> <!doctype html> <html> <head> <script src="jquery-1.9.1.min.js"></script> <meta charset="UTF-8"> </head> <body> <h1><?php echo $news['title'];?></h1> <pre> <?php echo $news['content'];?> </pre> <input type="hidden" name="id" value="<?php echo $id;?>"> 點讚數:<span id="s"><?php echo $news['dianzan'];?></span> <button id="btn">點讚</button> </body> </html>
js程式碼:
$("#btn").click(function(){ $.ajax({ url:"index.php", type:"POST", data:{id:<?php echo $id;?>}, async:false, success:function(data){ if(data === false){ alert('點讚失敗!');location.href='dianzan.php?id=<?php echo $id;?>'; }else{ alert('點贊成功!');$("#s").html(data); } } }) })
PHP程式碼部分:
<?php header("Content-type:text/html;charset=utf-8"); require_once 'mysqlHelper.php'; $db = new mysqlHelper('localhost','root','root','dianzan'); $id = $_POST['id']; $sql = "UPDATE news SET dianzan = dianzan +1 WHERE id = '$id'"; $res = $db->execSql($sql); if($res){ $dz = $db->getOneData("select * from news where id = '$id'"); $dz = $dz['dianzan']; echo $dz; }else{ return false; } ?>
以上就是php + ajax實現貼文點讚功能的詳細內容,更多請關注TW511.COM其它相關文章!