php + ajax實現貼文點讚功能

2020-07-16 10:06:08
知識:

一、首先頁面需要載入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其它相關文章!