ホームページ >ウェブフロントエンド >jsチュートリアル >ajax三層連携の実装方法

ajax三層連携の実装方法

韦小宝オリジナル: 2018-01-01 18:16:011201ブラウズ

この記事では、主に ajax 3 レベル連携の実装方法を詳しく紹介します。リンケージは小さなプラグインを作成するのに相当します。ここでは、データベース内の chinastates テーブルを使用して、3 レベルのリンケージを作成します。がすべて含まれており、コードとサブコードのメソッドが使用されますたとえば、北京、北京のコード名は11、その下の北京市のサブコード名は11、北京のメインコード名です。都市は1101で、北京市以下の地域のサブコード名は1101です。地域を調整する際、メインコードと同じサブコードを検索して見つけることができます 3 番目のレベルのリンクのコンテンツをページに表示したい場合は、ページ上に p を作成するだけです

bb27cae88d50e81d6f68da59a23beabb js と jquery で記述されているため、最初に考慮すべきことは、jquery パッケージと js ファイルを導入し、次に 3 つのドロップダウンリストを記述することです

 <script src="jquery-3.1.1.min.js"></script>
<script src="sanji.js"></script>

$(document).ready(function(e){
var str="<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>";  //先写三个下拉列表放到p里面
$("#sanji").html(str);
  fullsheng();
  fullshi();
  fullqu();

  $("#sheng").change(function(){
    fullshi();
    fullqu();
  })
  $("#shi").change(function(){
    fullqu();
  })
  //加载省份信息
  function fullsheng()
  {
    var pcode="0001";//根据父级代号查数据
    $.ajax({
      async:false, //采用异步的方式
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#sheng").html(str);

      }

    })
  }
//加载市的信息
  function fullshi()
  {
    var pcode=$("#sheng").val();
    $.ajax({
      async:false,
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#shi").html(str);

      }

    })
  }
 // 加载区的信息
  function fullqu()
  {
    var pcode=$("#shi").val();
    $.ajax({
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#qu").html(str);

      }

    })
  }



})

ここでは dataType: "JSON" を使用します。配列を使用する場合は、配列を走査して各データを取得する必要があります。js で配列を走査するには、for() { } を使用して配列を反復処理します。

最後に説明したいのは、純粋な PHP ページである処理ページです。以前に使用されていた dataType は JSON であったため、この場合、処理ページの出力も配列にすることはできません。ここではデータベースを呼び出すJsonQueryメソッド

function JsonQuery($sql,$type=1)
{
   $db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);

    $result=$db->query($sql);
    if($type=="1")
    {
     $arr=$result->fetch_all(MYSQLI_ASSOC);
      return json_encode($arr);
    }
    else
    {
      return $result;
    }
}

を、処理ページを書くときに使うととても便利です

<?php
$pcode=$_POST["pcode"];
include("DADB.class.php");
$db=new DADB();
$sql="select * from chinastates WHERE parentareacode=&#39;{$pcode}&#39;";
echo $db->JsonQuery($sql);

。

このようにして、下の図に示すように、3 レベルの連携が完成します

以上がこの記事の全内容であり、皆さんの学習に役立つことを願っています。誰もが PHP 中国語 Web サイトをサポートするでしょう。

ajax三層連携の実装方法

関連記事