隨著網(wǎng)路的快速發(fā)展，Web應(yīng)用程式的使用者體驗(yàn)成為了越來(lái)越重要的因素。使用Ajax技術(shù)實(shí)現(xiàn)點(diǎn)讚功能是常見(jiàn)的一種方式。本文將介紹如何使用ThinkPHP框架快速實(shí)現(xiàn)一個(gè)基於Ajax的點(diǎn)讚功能。
一、開(kāi)發(fā)環(huán)境準(zhǔn)備
本文使用ThinkPHP5.1框架，需要安裝PHP5.5以上版本和MySQL資料庫(kù)，並確保環(huán)境可以運(yùn)作ThinkPHP。
二、建立資料庫(kù)表
在MySQL中建立以下表格：
CREATE?TABLE?`likes`?( ??`id`?int(11)?NOT?NULL?AUTO_INCREMENT, ??`content_id`?int(11)?NOT?NULL?COMMENT?'點(diǎn)贊的文章id', ??`user_id`?int(11)?NOT?NULL?COMMENT?'點(diǎn)贊的用戶id', ??`created_time`?int(11)?NOT?NULL?DEFAULT?'0'?COMMENT?'點(diǎn)贊時(shí)間戳', ??`updated_time`?int(11)?NOT?NULL?DEFAULT?'0'?COMMENT?'更新時(shí)間戳', ??PRIMARY?KEY?(`id`) )?ENGINE=InnoDB?DEFAULT?CHARSET=utf8mb4;
三、Controller層
建立一個(gè)LikesController.php控制器，使用如下程式碼取得Ajax請(qǐng)求：
namespace?app\index\controller;
use?think\Controller;
use?think\Db;
class?LikesController?extends?Controller
{
????public?function?like()
????{
????????$content_id?=?input('post.content_id');
????????$user_id?=?input('post.user_id');
????????$created_time?=?time();
????????$updated_time?=?time();
????????$data?=?[
????????????'content_id'?=>?$content_id,
????????????'user_id'?=>?$user_id,
????????????'created_time'?=>?$created_time,
????????????'updated_time'?=>?$updated_time,
????????];
????????$result?=?Db::name('likes')->insert($data);
????????if?($result)?{
????????????return?json(['code'?=>?200,?'msg'?=>?'點(diǎn)贊成功']);
????????}?else?{
????????????return?json(['code'?=>?500,?'msg'?=>?'點(diǎn)贊失敗']);
????????}
????}
}
四、View層
建立一個(gè)index.html前端頁(yè)面，使用jQuery監(jiān)聽(tīng)使用者點(diǎn)擊事件，向伺服器發(fā)送Ajax請(qǐng)求：
<!DOCTYPE html>
<html>
<head>
????<title>點(diǎn)贊</title>
????<meta charset="utf-8">
????<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
????<div id="like_button" data-content-id="1" data-user-id="1">點(diǎn)贊</div>
</body>
<script type="text/javascript">
????$(document).ready(function?()?{
????????$('#like_button').click(function?()?{
????????????var?content_id?=?$(this).data('content-id');
????????????var?user_id?=?$(this).data('user-id');
????????????$.ajax({
????????????????url:?"/LikesController/like",
????????????????type:?"POST",
????????????????dataType:?"json",
????????????????data:?{"content_id":?content_id,?"user_id":?user_id},
????????????????success:?function?(data)?{
????????????????????if?(data.code?==?200)?{
????????????????????????alert(data.msg);
????????????????????}?else?{
????????????????????????alert(data.msg);
????????????????????}
????????????????}
????????????});
????????});
????});
</script>
</html>
五、路由設(shè)定
在路由檔案（route.php）中增加一個(gè)路由：
Route::post('/LikesController/like',?'index/LikesController/like');
六、測(cè)試
啟動(dòng)伺服器，訪問(wèn)http://localhost/ index/index/index，點(diǎn)選按讚即可測(cè)試功能。在MySQL中查看likes表中是否增加記錄，確保點(diǎn)讚成功。
七、總結(jié)
透過(guò)使用ThinkPHP框架和jQuery技術(shù)，實(shí)作了一個(gè)基於Ajax的點(diǎn)讚功能。此功能能夠提升Web應(yīng)用程式的使用者體驗(yàn)，增強(qiáng)使用者與Web應(yīng)用程式的互動(dòng)性。
以上是thinkphp快速實(shí)現(xiàn)一個(gè)基於Ajax的點(diǎn)讚功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
