Teilen der ThinkPHP-Nutzungserfahrung - ThinkPHP + Ajax realisiert ein zweistufiges Verknüpfungs-Dropdown-Menü

Das erste ist das Design der Datenbank. Die Klassifizierungstabelle heißt cate.

Was ich mache, ist die Verknüpfung klassifizierter Daten auf zweiter Ebene. Die für die Daten erforderlichen Felder sind: id, name (chinesischer Name), pid (Eltern-ID).

Einstellungen für die übergeordnete ID: Wenn die Daten keine obere Ebene haben, ist die übergeordnete ID 0. Wenn es eine obere Ebene gibt, ist die übergeordnete ID die ID der oberen Ebene.

Sobald die Datenbank über Inhalte verfügt, können Sie mit dem Schreiben von Code zur Implementierung der sekundären Verknüpfung beginnen.

Erstens alle Daten mit PID 0 im Hintergrund-PHP abrufen, in $cate speichern und dann eine foreach-Schleife verwenden, um sie im der ersten Ebene auszugeben.

Html-Code:

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

Ajax-Code:

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

Ajax-Code wird ausgelöst, nachdem der erste Ebenentyp geändert wurde. Die Hauptparameter der Ajax-Methode sind

1.url: Die Adresse zum Empfangen von Ajax im Hintergrund

2.Daten: Die an den Hintergrund übertragenen Daten werden normalerweise in JSON übergeben; die ausgewählte Klasse.

3.Typ: Übertragungsmethode, es gibt Get- und Post-Methoden, die mehr Daten übertragen können als Get und sicherer sind; 4.Fehler: Ajax-Ausführung Fehlermethode;

5.Erfolg: Ajax-Ausführungsmethode, bei der es sich um die Rückruffunktion handelt. Wenn ich hier Erfolg ausführe, lösche ich zunächst mit empty() den Inhalt des zweiten Dropdown-Menüs und gebe dann die aus dem Hintergrund erhaltenen Daten aus.

Die folgende Seite ist die Seite, auf der Thinkphp Ajax-Daten empfängt und verarbeitet

Die I()-Methode von Thinkphp kann tatsächlich als $_POST[] betrachtet werden, um die erste übergebene Ebene zu erhalten von ajax Wählen Sie die ID des Inhalts aus, rufen Sie dann seine Unterklasse ab und geben Sie ihn dann mit ajaxReturn() an Ajax zurück. Die Rückgabedaten werden im JSON-Format festgelegt, sodass Ajax die Daten im JSON-Format empfängt

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Native PHP-Rückgabedatenmethode:

Damit ist die Implementierung des zweistufigen Verknüpfungs-Dropdown-Menüs abgeschlossen. Es ist zu beachten, dass die URL korrekt sein muss und beim Empfang ein Rückgabewert vorliegen muss im Hintergrund, sonst führt Ajax die Erfolgsmethode von nicht aus.

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

Für mehr Austausch von ThinkPHP-Nutzungserfahrungen – ThinkPHP + Ajax zur Realisierung eines 2-Ebenen-Verknüpfungs-Dropdown-Menüs beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!

Verwandte Etiketten：

ThinkPHP Ajax

Quelle：php.cn

Vorheriger Artikel：Anmerkungen zur Yii2-Framework-Studie (4) – das erste Widget Nächster Artikel：Anmerkungen zur Yii2-Framework-Studie (5) – Ändern der Skin für das Backend

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Beispiele für HTML-Einstellungen für Fett, Kursiv, Unterstrichen, Durchgestrichen und andere Schrifteffekte
  1970-01-01 08:00:00
• Implementieren Sie eine Java-Version von Redis
  1970-01-01 08:00:00
• Die einfachste WeChat-Applet-Demo
  1970-01-01 08:00:00
• Einführung in einfache Betriebsmethoden von pandas.DataFrame (Erstellen, Indizieren, Hinzufügen und Löschen) in Python
  1970-01-01 08:00:00
• WeChat Mini-Programm: Beispiel für die Implementierung des Tab-Effekts
  1970-01-01 08:00:00
• Python erstellt benutzerdefinierte Methoden, um die Ausgabe der Wörterbuchstruktur zu verschönern
  1970-01-01 08:00:00
• HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten
  1970-01-01 08:00:00
• Asp.net verwendet SignalR zum Senden von Bildern
  1970-01-01 08:00:00
• WeChat Mini-Programmentwicklungs-Tutorial – Übersicht über die Funktionen von App() und Page()
  1970-01-01 08:00:00
• Ausführliche Erklärung zur Verwendung von Python Redis
  1970-01-01 08:00:00

Aktuelle Ausgaben

Zeigen Sie AWS PDF-Dateien im Bootstrap-Modus in Laravel an Ich habe die AWS-URL wie https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65571220...

Aus 2024-04-04 22:16:18

0

1

1450

Überarbeiteter Titel: Berechnen Sie die Gesamtsumme basierend auf der Auswahl des Kontrollkästchens Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle...

Aus 2024-04-04 13:45:50

0

1

3465

Generieren von Inhalten mit Ajax – Scrollen zur ID funktioniert nicht Ich erzeuge Seiteninhalte basierend auf Daten, die ich über Ajax erhalten habe. Das Proble...

Aus 2024-04-04 09:29:39

0

1

397

So übergeben Sie mehrere Listen von Ajax an Django Ich habe ein Problem, ich möchte alle Daten aus der Liste abrufen, also möchte ich alle Da...

Aus 2024-04-03 23:20:06

0

1

362

Laden Sie mehrere Bilddateien in CodeIgniter mit Ajax und PHP hoch Ich habe Probleme beim Hochladen mehrerer Bilddateien auf den Server. Es wäre großartig, w...

Aus 2024-04-03 22:35:03

0

1

318

verwandte Themen

Mehr>

• Der Unterschied zwischen leichtgewichtigen Anwendungsservern und Cloud-Servern
• So implementieren Sie die Docker-Container-Technologie in Java
• Was sind die Zugriffsmodifikatoren für Klassen in PHP?
• js-Methode zum Abfangen von Zeichenfolgen
• Was sind die Grundkomponenten eines Computers?
• Was ist LAN?
• Einführung in häufig verwendete Windows-Registrierungsbefehle
• Der Unterschied zwischen Front-End und Back-End

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1414621
• 
  php入门教程之一周学会PHP

  4252755
• 
  JAVA 初级入门视频教程

  2460143
• 
  小甲鱼零基础入门学习Python视频教程

  502481
• 
  PHP 零基础入门教程

  842511

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1414621 Lernzeiten
• 
  JAVA 初级入门视频教程

  2460143 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  502481 Lernzeiten
• 
  Web前端开发极速入门

  215138 Lernzeiten
• 
  零基础精通 PS 视频教程

  872537 Lernzeiten

• 
  【web前端】Node.js快速入门

  6063 Lernzeiten
• 
  国外Web开发全栈课程全集

  4618 Lernzeiten
• 
  Go语言实战之 GraphQL

  3990 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  595 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  20289 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [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)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！