Ajax+php realisiert eine dreistufige Verknüpfung der Produktklassifizierung

In diesem Artikel wird hauptsächlich Ajax + PHP vorgestellt, um die dreistufige Verknüpfung der Produktklassifizierung zu realisieren, die einen bestimmten Referenzwert hat.

Wenn die Seite geladen wird, wird Ajax zum asynchronen Senden verwendet Daten im Hintergrund anfordern Daten anfordern, die Produktkategorie der ersten Ebene laden, das Produkt der zweiten Ebene laden, wenn das Produkt der ersten Ebene ausgewählt ist, und das Produkt der dritten Ebene laden, wenn das Produkt der zweiten Ebene ausgewählt ist.

Implementierung: 1. Nachdem Sie die Daten erhalten haben, laden Sie das Produkt mit PID 0, erstellen Sie dynamisch eine Option, um das Produkt an das Menü der ersten Ebene anzuhängen, und legen Sie den Wert fest
2. Wenn Sie ein Produkt der ersten Ebene auswählen, laden Sie das Produkt mit pid = aktuelle ID, erstellen Sie eine Option zum Anhängen des Produkts an das Menü der zweiten Ebene und legen Sie den Wert fest
3. Bei der Auswahl eines Produkts der zweiten Ebene Produkt, laden Sie das Produkt mit pid = aktuelle ID und erstellen Sie eine Option, um das Produkt zum Menü der dritten Ebene hinzuzufügen und den Wert festzulegen

Seiteneffekt:

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

Backend-Code:

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

 $result=getByPid($arr,$pid);
 //输出json数据
 echo json_encode($result);
?>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über den Ausgabestream am Ende des Servlets in der Ajax-Technologie

Zusammensetzung der Ajax-Technologie und Kernprinzipanalyse

Ajax asynchrone Ladeanalyse

Das obige ist der detaillierte Inhalt vonAjax+php realisiert eine dreistufige Verknüpfung der Produktklassifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!