suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie Ajax, um eine dreistufige Verknüpfung der Menüleiste zu realisieren

Verwenden Sie Ajax, um eine dreistufige Verknüpfung der Menüleiste zu realisieren

php中世界最好的语言
php中世界最好的语言Original
2018-03-30 17:32:191684Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von Ajax vorstellen, um die Verknüpfung der dritten Ebene der Menüleiste zu realisieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von Ajax, um die Verknüpfung der dritten Ebene der Menüleiste zu realisieren? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Hauptseitencode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../wenjian/jquery-2.2.3.min.js"></script>
</head>
<body>
<select id="sheng">
  <option>请选择</option>
</select>
<select id="shi">
  <option >请选择</option>
</select>
<select id="qu">
  <option >请选择</option>
</select>
</body>
</html>
<script>
  $.ajax({
    data: {parent_id: 0}, //发送的数据
    dataType: "json", //返回值的类型 text为string型
    type: 'post',  //发送请求的方法(get)
    url: 'sheng_l.php',//发送请求的地址
    success: function (data) {//发送成功时的回调函数
  //      console.log(data);
      for (var i in data) {
        $("#sheng").append("<option value=&#39;"+ data[i][2] +"&#39;>" + data[i][1] +"</option>")
      }
    }
  })
  $(document).ready(function () {
    $("#sheng").change(function () {
      $("#shi").get(0).options.length= 1;
//      $("#qu").get(0).options.length= 1;
      var data = $("#sheng").find("option:selected").val();
      $.ajax({
        data:{parent_id:data},
        type:"post",
        dataType:"json",
        url:"sheng_l.php",
        success:function (data) {
          for(var i in data){
            $("#shi").append("<option value=&#39;" + data[i][2] +"&#39;>" + data[i][1] +"</option>")
          }
        }
      })
    })
  })
  $(document).ready(function () {
    $("#shi").change(function () {
      $("#qu").get(0).options.length= 1;
      var data = $("#shi").find("option:selected").val();
      $.ajax({
        data:{parent_id:data},
        type:"post",
        dataType:"json",
        url:"sheng_l.php",
        success:function (data) {
          for (var i in data){
            $("#qu").append("<option value=&#39;" +data[i][2] +"&#39;>" +data[i][1] +"</option>")
          }
        }
      })
    })
  })

Verarbeitungsseitencode

<?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/29
 * Time: 20:56
 */
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$sql = "select * from region WHERE father_id = {$_POST[&#39;parent_id&#39;]}";
$result = $db->Query($sql);
echo json_encode($result);

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

So verwenden Sie Ajax, um asynchron zu prüfen, ob der Benutzername dupliziert ist

Ajax mit $. Post-Methode Benutzernamenüberprüfung

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um eine dreistufige Verknüpfung der Menüleiste zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：So implementieren Sie die Funktion der Aufforderung zur Eingabe von Informationen in AjaxNächster Artikel：So implementieren Sie die Funktion der Aufforderung zur Eingabe von Informationen in Ajax

In Verbindung stehende Artikel

Mehr sehen