Partage d'expérience d'utilisation de ThinkPHP - ThinkPHP Ajax réalise un menu déroulant de liaison à 2 niveaux

Le premier est la conception de la base de données. La table de classification s'appelle cate.

Ce que je fais est le couplage de deuxième niveau des données classifiées. Les champs requis pour les données sont : id, name (nom chinois), pid (id parent).

Paramètres de l'identifiant parent : si les données n'ont pas de niveau supérieur, l'identifiant parent est 0. S'il existe un niveau supérieur, l'identifiant parent est l'identifiant du niveau supérieur.

Une fois que la base de données a du contenu, vous pouvez commencer à écrire du code pour implémenter une liaison secondaire.

Récupérez d'abord toutes les données avec le pid 0 dans le php d'arrière-plan, enregistrez-les dans $cate, puis utilisez une boucle foreach pour les afficher dans de la première couche.

Code HTML :

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name=&#39;cate&#39; item=&#39;v&#39;>
         <option value="{$v[&#39;ca_id&#39;]}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签：
 <select name="lable" size="1" id="lables">
 </select>

Code Ajax :

  $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value=&#39;"+data[i].ca_id+"&#39;>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Le code Ajax est déclenché après la modification du premier type de couche. Les principaux paramètres de la méthode ajax sont.

1.url : L'adresse où l'ajax est reçu en arrière-plan

2.data : Les données transmises en arrière-plan sont généralement transmises en json ; valeur de la classe sélectionnée.

3.type : méthode de transfert, il existe des méthodes get et post. J'utilise généralement post, qui peut transmettre plus de données que get, et est plus sécurisée ;

4.erreur : exécution ajax ; Méthode d'échec ;

5.success : méthode d'exécution Ajax, qui est la fonction de rappel. Lors de l'exécution réussie ici, j'utilise d'abord empty() pour effacer le contenu du deuxième menu déroulant, puis j'affiche les données obtenues en arrière-plan.

Ce qui suit est la page où Thinkphp reçoit et traite les données ajax

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

La méthode I() de Thinkphp peut en fait être considérée comme $_POST[], afin d'obtenir la première couche passée par ajax Sélectionnez l'identifiant du contenu, puis récupérez sa sous-classe, puis utilisez ajaxReturn() pour le renvoyer à ajax. Les données de retour sont définies sous forme json, donc ajax recevra les données sous forme json

. Méthode de retour des données PHP natives :

   //搜索结果为$result
   .....
   echo json_encode($result);

Ceci termine la mise en œuvre du menu déroulant de liaison à deux niveaux. Il convient de noter que l'URL doit être correcte et qu'il doit y avoir une valeur de retour une fois reçue. en arrière-plan, sinon ajax n'exécutera pas la méthode success de.

Pour plus de partage de l'expérience d'utilisation de ThinkPHP - ThinkPHP Ajax réalise un menu déroulant de liaison à 2 niveaux et des articles connexes, veuillez faire attention au site Web PHP chinois !

Étiquettes associées：

ThinkPHP Ajax

source：php.cn

Article précédent：Notes d'étude du framework Yii2 (4) -- le premier widget Article suivant：Notes d'étude du framework Yii2 (5) -- changer l'habillage du backend

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

Derniers articles par auteur

• Exemples de paramètres HTML pour les effets de police gras, italique, souligné, barré et autres
  1970-01-01 08:00:00
• 实现一个 Java 版的 Redis
  1970-01-01 08:00:00
• La démo d'applet WeChat la plus simple
  1970-01-01 08:00:00
• Introduction aux méthodes de fonctionnement simples de pandas.DataFrame (créer, indexer, ajouter et supprimer) en python
  1970-01-01 08:00:00
• WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets
  1970-01-01 08:00:00
• Python construit des méthodes personnalisées pour embellir la sortie de la structure du dictionnaire
  1970-01-01 08:00:00
• HTML5 : utilisez Canvas pour traiter la vidéo en temps réel
  1970-01-01 08:00:00
• Asp.net utilise SignalR pour envoyer des images
  1970-01-01 08:00:00
• Tutoriel de développement de programmes WeChat Mini-App() et Page() Présentation des fonctions
  1970-01-01 08:00:00
• Explication détaillée de l'utilisation de Python Redis
  1970-01-01 08:00:00

Derniers numéros

Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...

Depuis 2024-04-04 22:16:18

0

1

1450

Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...

Depuis 2024-04-04 13:45:50

0

1

3465

Générer du contenu à l'aide d'Ajax - le défilement jusqu'à Id ne fonctionne pas Je génère du contenu de page basé sur des données obtenues via ajax. Le problème que j'ai ...

Depuis 2024-04-04 09:29:39

0

1

397

Comment passer plusieurs listes d'ajax à Django J'ai un problème, je veux obtenir toutes les données de la liste, donc je veux parcourir c...

Depuis 2024-04-03 23:20:06

0

1

362

Téléchargez plusieurs fichiers image dans CodeIgniter en utilisant Ajax et PHP J'ai du mal à télécharger plusieurs fichiers image côté serveur. Ce serait formidable si q...

Depuis 2024-04-03 22:35:03

0

1

318

Rubriques connexes

Plus>

• Il existe plusieurs types de noyaux de navigateur
• Que dois-je faire si mon ordinateur ne s'allume pas ?
• commande utilisateur du commutateur Linux
• Jusqu'où ira Ethereum ?
• Comment ouvrir le fichier php
• utilisation du curseur Oracle
• Comment utiliser le stockage local
• Méthode de représentation de la constante de chaîne

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1414621
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4252755
• 
  Tutoriel vidéo JAVA pour débutants

  2460147
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  502481
• 
  Tutoriel d'introduction PHP base zéro

  842511

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1414621 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2460147 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  502481 temps d'étude
• 
  Introduction rapide au développement web front-end

  215138 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  872539 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  6063 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  4618 temps d'étude
• 
  Aller au langage pratique GraphQL

  3990 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  595 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  20289 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！