知識:
一、首先頁面需要加載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;
}
?>