Comment mettre en œuvre la classification des produits de liaison à trois niveaux d'Ajax

Cette fois, je vais vous montrer comment mettre en œuvre la classification des produits de liaison à trois niveaux d'Ajax, et quelles sont les précautions pour mettre en œuvre la classification des produits de liaison à trois niveaux d'Ajax. Ce qui suit est un cas pratique, prenons. un regard.

Analyse des idées :

Effet : lorsque la page se charge, utilisez ajax pour demander des données de manière asynchrone à l'arrière-plan, chargez le produit de premier niveau catégorie, et lors de la sélection Lors de la sélection de produits de premier niveau, chargez les produits de deuxième niveau et sélectionnez les produits de deuxième niveau pour charger les produits de troisième niveau.

Mise en œuvre :

1 Après avoir obtenu les données, chargez le produit avec le pid 0 et créez dynamiquement une option pour ajouter le produit. le menu de premier niveau et définissez la valeur

2. Lors de la sélection d'un produit de premier niveau, chargez le produit avec pid = identifiant actuel et créez une option pour ajouter le produit au menu secondaire et définissez la valeur Valeur

3. Lors de la sélection d'un produit secondaire, chargez le produit avec pid = identifiant actuel, créez une option pour ajouter le produit au menu de troisième niveau et définissez la valeur

Effet de page :

$(function(){
      //请求路径
      var url="03goods.php";
      //option默认内容
      var option="<option value=&#39;0&#39;>未选择</option>";
      //获取jq对象
      var $sel1=$(".sel1");
      var $sel2=$(".sel2");
      var $sel3=$(".sel3");
      //自动生成一个<option>元素
      function createOption(value,text){
        var $option=$("<option></option>");
        $option.attr("value",value);
        $option.text(text);
        return $option;
      }
      //加载数据
      function ajaxSelect($select,id){
        //get请求
        $.get(url,{"pid":id},function(data){
          $select.html(option);
          for(var k in data ){
            $select.append(createOption(data[k].id,data[k].name));
          }
        },"json");
      }
      //自动加载第一个下拉菜单
      ajaxSelect($sel1,"0");
      //选择第一个下拉菜单时加载第二个
      $sel1.change(function(){
        var id=$sel1.val();
        if(id=="0"){
          $sel2.html(option);
          $sel3.html(option);
        }else{
          ajaxSelect($sel2,id);
        }
      });
      //选择第二个下拉菜单时加载第三个
      $sel2.change(function(){
        var $id=$sel2.val();
        if($id=="0"){
          $sel3.html(option);
        }else{
          ajaxSelect($sel3,$id);
        }
      });
    });

Code backend :

<?php
  header(&#39;Content-Type:text/html; charset=utf-8&#39;);
  //数据
  $arr=array(
   //array(分类id,分类名，分类的父id)
   array(&#39;id&#39;=>'1','name'=>'数码产品','pid'=>'0'),
   array('id'=>'2','name'=>'家电','pid'=>'0'),
   array('id'=>'3','name'=>'书籍','pid'=>'0'),
   array('id'=>'4','name'=>'服装','pid'=>'0'),
   array('id'=>'5','name'=>'手机','pid'=>'1'),
   array('id'=>'6','name'=>'笔记本','pid'=>'1'),
   array('id'=>'7','name'=>'平板电脑','pid'=>'1'),
   array('id'=>'8','name'=>'智能手机','pid'=>'5'),
   array('id'=>'9','name'=>'功能机','pid'=>'5'),
   array('id'=>'10','name'=>'电视机','pid'=>'2'),
   array('id'=>'11','name'=>'电冰箱','pid'=>'2'),
   array('id'=>'12','name'=>'智能电视','pid'=>'10'),
   array('id'=>'13','name'=>'编程书籍','pid'=>'3'),
   array('id'=>'14','name'=>'JavaScript','pid'=>'13'),
  );
  //获取指定分类的商品
  function getByPid($arr,$pid){
    $result=array();
    foreach($arr as $v){
      if($v['pid']==$pid){
       $result[]=$v;
      }
    }
    return $result;
  }
  //获取请求参数
  $pid=isset($_GET['pid'])?$_GET['pid']:'0';
  $result=getByPid($arr,$pid);
  //输出json数据
  echo json_encode($result);
?>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment réaliser un lien secondaire entre Ajax et PHP

Les composants et le cœur de la technologie Ajax qui les novices doivent lire l'analyse des principes

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!