Comment js interagit avec les données thinkphp5

Ces dernières années, le développement rapide de la technologie front-end a offert de meilleures possibilités pour le modèle de développement de séparation front-end et back-end. En développement, JavaScript (JS en abrégé), en tant que langage de développement front-end couramment utilisé, est également devenu un élément indispensable du développement front-end. Dans ce cas, la façon dont JS interagit avec le framework back-end php5 (TP5 en abrégé) est devenue l'un des problèmes qui préoccupent les développeurs. Dans cet article, je présenterai en détail la méthode d'interaction des données entre JS et tp5 sous plusieurs aspects.

1. Méthodes d'interaction des données front-end et back-end

Il existe généralement deux manières d'interagir avec les données front-end et back-end : synchrone et asynchrone. La méthode synchrone signifie qu'une fois que le front-end a envoyé une requête, il doit attendre que le back-end renvoie des données avant de répondre ; la méthode asynchrone n'a pas besoin d'attendre une fois que le front-end a lancé la requête, il peut continuer à le faire. exécuter vers le bas et attendre le retour des données back-end avant le traitement.

Dans le développement actuel, la méthode de synchronisation est devenue de moins en moins utilisée en raison de ses défauts tels que le retard. La méthode asynchrone est devenue la principale méthode d'interaction des données front-end et back-end. Dans la discussion suivante, nous expliquerons principalement la méthode d'interaction entre les données JS et tp5 en mode asynchrone.

2. Utilisez ajax pour réaliser une communication asynchrone

Dans la communication asynchrone, l'essentiel est d'utiliser ajax pour réaliser une communication de données front-end et back-end. Ajax est l'abréviation de Asynchronous JavaScript and XML (JavaScript et XML asynchrones). Il s'agit d'une technologie de communication asynchrone utilisant JavaScript. Il peut mettre à jour des parties d’une page sans recharger la page entière.

Lorsque nous utilisons ajax, nous devons écrire du code JS dans la partie front-end et du code tp5 dans la partie back-end. Une fois que le front-end a envoyé une requête ajax, le back-end renverra des données Json (il peut également s'agir de données au format XML) après réception de la requête. Une fois les données renvoyées, elles sont traitées par le JS frontal.

Ce qui suit est un cas de développement réel. Sur cette base, l'implémentation spécifique de l'interaction asynchrone entre JS et tp5 est présentée en détail.

Première étape : écrire le code front-end sur le front-end

Nous écrivons d'abord une page pour définir les autorisations des utilisateurs sur le front-end. La page doit implémenter deux opérations : ajouter et supprimer des autorisations. Ici, nous prenons l'opération "ajouter" comme exemple pour illustrer.

Nous devons d'abord écrire un bouton sur la page afin qu'après avoir cliqué sur le bouton, un formulaire remplissant les informations d'autorisation apparaisse. Dans le même temps, afin d'afficher facilement les informations d'autorisation, nous devons également écrire un tableau sur la page pour afficher toutes les informations d'autorisation.

Utilisez le code JS suivant pour générer un tableau HTML afin d'afficher les informations d'autorisation.

function getAuthorityTable() {
    $.ajax({
        type: "GET",
        url: "/index/getAuthorityTable",
        dataType: "json",
        success: function (data) {
            var table = "<table><thead><tr><th>权限编号</th><th>权限名</th><th>操作</th></thead><tbody>";
            for (var i = 0; i < data.length; i++) {
                table += "<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["authority_name"] + "</td><td><button onclick='deleteAuthority(" + data[i]["id"] + ")'>删除</button></td></tr>";
            }
            table += "</tbody></table>";
            $("#authorityTable").html(table);
        }
    });
}

Ici, nous utilisons ajax pour obtenir de manière asynchrone des données back-end et générer un tableau HTML composé de trois parties : le numéro d'autorisation, le nom de l'autorisation et l'opération de suppression. Parmi elles, la méthode getAuthorityTable() définit l'URL de la requête frontale et génère un tableau HTML à partir des résultats de la requête à afficher sur la page.

Étape 2 : Écrivez le code tp5 sur le backend

Nous devons écrire une méthode côté serveur pour répondre à la requête URL. Dans tp5, nous pouvons utiliser des contrôleurs et des modèles à implémenter.

Par exemple, nous pouvons ajouter une méthode setAuthority dans le contrôleur Index du contrôleur :

public function setAuthority()
{
    $authority_name = input('post.authority_name');
    $model = new Authority();
    if ($model -> add_authority($authority_name)) {
        $this -> success('添加权限成功!');
    } else {
        $this -> error('添加权限失败！');
    }
}

Dans le code ci-dessus, nous utilisons la méthode d'entrée pour recevoir les paramètres POST et appelons la méthode add_authority dans la classe de modèle Authority pour ajouter des informations d'autorisation. Enfin, les méthodes intégrées $this->success et $this->error de tp5 sont utilisées pour renvoyer des informations d'état afin d'informer le front-end du succès ou de l'échec de l'opération.

Étape 3 : Utilisez JS pour envoyer une requête sur le front-end

Nous devons implémenter dans le code JS du front-end, après avoir cliqué sur le bouton, envoyer une requête au backend et obtenir la réponse renvoyée par le backend.

Prenez l'opération d'ajout d'autorisation comme exemple et implémentez cette opération dans l'événement de clic sur le bouton.

function addAuthority() {
    var authority_name = $("#authorityName").val();
    $.ajax({
        type: "POST",
        url: "/index/setAuthority",
        dataType: "json",
        data: {authority_name: authority_name},
        success: function (data) {
            alert(data.msg);
        }
    });
}

Dans le code ci-dessus, nous utilisons la méthode POST pour envoyer une requête au serveur, en envoyant "authority_name" comme paramètre au contrôleur SetAuthority. Ensuite, data.msg est utilisé pour renvoyer les informations sur l'état de l'opération.

3. Autres questions nécessitant une attention

En plus de ce qui précède, certains points nécessitent une attention particulière :

1 Requête inter-domaines : étant donné que les requêtes ajax sont asynchrones et que les noms de domaine sont front-end et back-end. respectivement, afin d'assurer la sécurité, JS front-end Il n'est pas sous le même nom de domaine que le serveur backend. À l’heure actuelle, vous devez envisager de résoudre le problème des requêtes inter-domaines. Les solutions courantes incluent l'utilisation de JSONP, l'ajout d'un en-tête dans le backend, etc.

2. Attaque CSRF : étant donné que les requêtes asynchrones ajax peuvent entraîner des problèmes de sécurité de falsification de requêtes intersites (CSRF), tp5 a utilisé sa propre méthode pour empêcher les attaques CSRF. Vous pouvez modifier les paramètres pertinents dans le fichier thinkconfig.php pendant le développement.

3. Vérification des interactions front-end et back-end : Afin de garantir la sécurité du système, une vérification est requise lors du processus d'interaction des données front-end et back-end. Vous pouvez utiliser la classe tp5 Validator pour les opérations associées. .

4.Traitement des données JSON : étant donné que les données au format JSON doivent être traitées lors des requêtes asynchrones ajax, le JS frontal utilise souvent Json.stringify, JSON.parse et d'autres méthodes pour effectuer les opérations associées.

En bref, l'interaction des données entre JS et tp5 est basée sur la méthode de communication asynchrone d'ajax. Tant que nous comprenons les méthodes de communication de JS et tp5 et apprenons les outils et méthodes correspondants, nous pouvons réaliser le développement de sites Web plus efficacement. Dans le même temps, au cours du processus de développement, nous devons également prendre en compte certains problèmes de sécurité et de vérification. J'espère que cet article pourra être utile aux lecteurs.

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!