Verwenden Sie Ajax, um eine dreistufige Verknüpfung der Menüleiste zu realisieren-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-03-30 17:32:19

Original

1715 Leute haben es durchsucht

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>")
          }
        }
      })
    })
  })

Nach dem Login kopieren

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

Nach dem Login kopieren

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!