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 221f08282418e2996498697df914ce4e 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!