So implementieren Sie die dreistufige Verknüpfungsproduktklassifizierung von Ajax

Dieses Mal zeige ich Ihnen, wie Sie die dreistufige Verknüpfungsproduktklassifizierung von Ajax implementieren und welche Vorsichtsmaßnahmen es gibt, um die dreistufige Verknüpfungsproduktklassifizierung von Ajax zu implementieren sehen.

Ideenanalyse:

Wirkung: Wenn die Seite geladen wird, verwenden Sie Ajax, um asynchron Daten aus dem Hintergrund anzufordern und das Produkt der ersten Ebene zu laden Wenn Sie Produkte der ersten Ebene auswählen, laden Sie Produkte der zweiten Ebene und wählen Sie Produkte der zweiten Ebene aus, um Produkte der dritten Ebene zu laden.

Implementierung:

1. Nachdem Sie die Daten erhalten haben, laden Sie das Produkt mit PID 0 und erstellen Sie dynamisch eine Option, zu der das Produkt hinzugefügt werden soll das Menü der ersten Ebene und legen Sie den Wert

fest. 2. Wenn Sie ein Produkt der ersten Ebene auswählen, laden Sie das Produkt mit pid = aktuelle ID und erstellen Sie eine Option, um das Produkt an das Sekundärmenü und legen Sie den Wert Wert

3 fest. Wenn Sie ein sekundäres Produkt auswählen, laden Sie das Produkt mit pid = aktuelle ID, erstellen Sie eine Option zum Anhängen des Produkts an das Menü der dritten Ebene und legen Sie den Wert

Seiteneffekt:

Backend-Code:

$(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);
        }
      });
    });

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<?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);
?>

Empfohlene Lektüre:

So erreichen Sie eine sekundäre Verknüpfung mit Ajax in Kombination mit PHP

Die Komponenten und der Kern der Ajax-Technologie dass Anfänger die Prinzipanalyse lesen müssen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die dreistufige Verknüpfungsproduktklassifizierung von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!