ThinkPHP et Ajax réalisent un menu déroulant de liaison secondaire

Cet article présente principalement le menu déroulant de la liaison secondaire entre ThinkPHP et Ajax. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à l'existence des données de la liaison

. Dans la base de données, les données du menu peuvent être modifiées à tout moment en ajoutant, supprimant, modifiant ou modifiant la base de données sans modifier le code. En même temps, après avoir atteint le niveau 2, le niveau 3 et le niveau 4 peuvent également être atteints. . . . Attendez le menu associé

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 les premières données. transmis par ajax. L'identifiant du contenu sélectionné dans la couche, puis récupérez sa sous-classe, puis utilisez ajaxReturn() pour le renvoyer à ajax. Ici, les données de retour sont définies sous forme json, donc ajax recevra les données dans. formulaire json

Retour de la méthode de données php natif :

Le code est le suivant :

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

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

Ce qui précède représente l'intégralité du contenu de cet article. Merci à tous d'avoir lu. Veuillez faire attention au site Web PHP chinois pour plus de contenu !

Recommandations associées :

Fonction push de messages en temps réel implémentée par PHP [basée sur le push anti-ajax]

dans Comment utiliser ajax pour obtenir une pagination sans actualisation dans Thinkphp

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!

Étiquettes associées：

ajax thinkphp

source：php.cn

Article précédent：Classe d'encapsulation d'opération de fichier image PHP Article suivant：Connaissance de base et application des modèles de conception PHP

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

• Qu'est-ce que la programmation ?
  2019-04-16 16:04:28
• La touche de raccourci pour la recherche est la touche ctrl plus quelle touche
  2020-09-15 11:26:00
• Qu'est-ce qui est ajouté à la touche de raccourci Couper Ctrl ?
  2020-09-10 14:26:14
• Quel est son métier ?
  2020-09-08 11:06:15
• Qu'est-ce que ctrl plus enregistre ?
  2020-09-09 09:46:36
• Quelle est la touche de raccourci pour ctrl+t ?
  2020-10-12 14:51:04
• Comment utiliser la règle PS ?
  2020-09-10 14:40:02
• Qui est apte à apprendre la programmation ?
  2019-04-24 16:20:55
• Quelle est la touche de raccourci pour la sélection inversée dans PS ?
  2020-10-13 11:40:03
• Comment ajouter un saut de ligne entre deux éléments en ligne
  2019-04-15 14:06:21

Derniers numéros

Que dois-je faire si le téléchargement échoue lors de l'installation de Workman via Composer ? Il y a également une erreur lors du téléchargement d'autres plug-ins. D:\phpstudy_pro\WWW\tpShop\thinkphp>composer require topthink/think-worker=2.0.*./compo...

Depuis 2023-08-25 17:04:18

0

0

131

Comment fermer la page actuelle lors du téléchargement d'un fichier Utilisez thinkphp pour télécharger avec succès. Ensuite, il reste sur cette page. Comment ...

Depuis 2023-05-08 21:54:29

0

2

376

Comment faire fonctionner thinkphp dans un environnement XAMPP ? ? J'ai beaucoup cherché sur Internet et je n'ai pas compris. Ce site Web ne semble pas avoir...

Depuis 2023-05-02 20:43:39

0

3

346

erreur thinkphp lors de l'insertion de données de type date Erreur thinkphp lors de l'insertion de données de type date : Format datetime invalide : 1...

Depuis 2023-03-18 06:44:10

0

1

335

problème de tri des champs de classement de pagination thinkphp $model->order('ranking', 'asc')->page($page, $limit)->select()->toArray(); Je ...

Depuis 2022-10-26 17:03:51

0

0

315

Rubriques connexes

Plus>

• tutoriel ajax
• Solution de code tronqué chinois Ajax
• Que faire si ajax transmet des caractères chinois tronqués
• Lequel est le plus simple, thinkphp ou laravel ?
• Quelles sont les performances de thinkphp ?
• Classements des échanges de crypto-monnaie
• bootsql.dat
• Introduction aux logiciels de dessin architectural

Recommandations populaires

• Comment configurer des hôtes sur un ordinateur Mac (étapes avec images et texte)
• Construisez rapidement un robot QQ simple avec PHP
• Méthodes communes de vérification de signature API (implémentation PHP)
• Collection d'opérations de date et d'heure courantes en PHP
• PHP génère un code de vérification graphique (type d'interférence amélioré)

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)

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

  4230888
• 
  Tutoriel vidéo JAVA pour débutants

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

  498153
• 
  Tutoriel d'introduction PHP base zéro

  833977

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

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

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

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

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

  858888 temps d'étude

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

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

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

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

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

  16086 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！