Maison > cadre php > PensezPHP > thinkphp implémente rapidement une fonction similaire basée sur Ajax

thinkphp implémente rapidement une fonction similaire basée sur Ajax

PHPz
Libérer: 2023-04-10 09:28:58
original
730 Les gens l'ont consulté

Avec le développement rapide d'Internet, l'expérience utilisateur des applications Web est devenue un facteur de plus en plus important. Utiliser la technologie Ajax pour implémenter la fonction similaire est une méthode courante. Cet article explique comment utiliser le framework ThinkPHP pour implémenter rapidement une fonction similaire basée sur Ajax.

1. Préparation de l'environnement de développement

Cet article utilise le framework ThinkPHP5.1 Vous devez installer PHP5.5 ou supérieur et une base de données MySQL, et vous assurer que l'environnement peut exécuter ThinkPHP.

2. Créez une table de base de données

Créez la table suivante dans MySQL :

CREATE TABLE `likes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content_id` int(11) NOT NULL COMMENT '点赞的文章id',
  `user_id` int(11) NOT NULL COMMENT '点赞的用户id',
  `created_time` int(11) NOT NULL DEFAULT '0' COMMENT '点赞时间戳',
  `updated_time` int(11) NOT NULL DEFAULT '0' COMMENT '更新时间戳',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Copier après la connexion

3. Couche de contrôleur

Créez un contrôleur LikesController.php et utilisez le code suivant pour obtenir la requête Ajax :

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' => '点赞成功']);
        } else {
            return json(['code' => 500, 'msg' => '点赞失败']);
        }
    }
}
Copier après la connexion

4.

Création Une page frontale index.html, utilise jQuery pour surveiller les événements de clic de l'utilisateur et envoie des requêtes Ajax au serveur :

<!DOCTYPE html>
<html>
<head>
    <title>点赞</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">点赞</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>
Copier après la connexion

5. Paramètres de routage

Ajoutez une route dans le fichier de routage (route.php) :

Route::post('/LikesController/like', 'index/LikesController/like');
Copier après la connexion

6. Tests

Démarrez le serveur, visitez http://localhost/index/index/index, cliquez sur J'aime pour tester cette fonction. Vérifiez si des enregistrements sont ajoutés dans la table des likes dans MySQL pour vous assurer que les likes réussissent.

7. Résumé

En utilisant le framework ThinkPHP et la technologie jQuery, une fonction similaire basée sur Ajax est implémentée. Cette fonctionnalité peut améliorer l'expérience utilisateur des applications Web et améliorer l'interaction entre les utilisateurs et les applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal