Ajax 3단계 연계 그래픽 및 텍스트(코드 포함)에 대한 자세한 설명

이번에는 ajax 3단계 연결에 대한 자세한 그래픽 설명(코드 포함)을 가져왔습니다. ajax가 3단계 연결을 달성하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례를 살펴보겠습니다.

ajax는 작은 플러그인을 작성하는 것과 동일한 3단계 연결을 구현합니다. 여기서는 데이터베이스의 chinastates 테이블을 사용합니다. 데이터베이스에 콘텐츠가 있고, 3단계 연계로 많은 콘텐츠가 들어있어요. 코드와 서브코드 방식을 사용해서 지역명이 다 들어있어요

예를 들어 베이징의 코드네임은 11, 그 아래 베이징시의 하위 코드명은 11이고, 베이징시의 주요 코드명은 1101이며, 그 아래 베이징시의 하위 코드명은 1101이다. 지역의 하위 코드는 1101이다. 지역별로 메인코드를 기준으로 동일한 서브코드를 조회하여 알아낼 수 있습니다

3차 연계의 내용을 페이지에 표시하고 싶다면,

다음은 지방과 도시의 세 열을 고려하는 것입니다. 이 세 열은 드롭다운을 사용합니다. 목록, 그러면 그 안에는 무엇을 사용해야 할까요? " 이전에 "TEXT" JSON을 사용했다면 배열을 사용하여 배열을 순회하고 각 데이터 조각을 가져와야 합니다. js에서 배열을 순회하려면, for () {}를 사용하여 배열을 탐색합니다.

마지막으로 이야기하고 싶은 것은 순수 PHP 페이지인 처리 페이지입니다. 이전에 사용했던 dataType이 JSON이었기 때문에 처리 페이지의 출력도 배열이어야 합니다. 여기서는 데이터베이스를 호출하는 패키지 페이지에 JsonQuery 메서드

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

이렇게 하면 아래 그림과 같이 연결이 완료될 수 있습니다

믿습니다. 이 기사의 사례를 읽으신 후, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하시기 바랍니다. !

추천 자료:

사진 및 텍스트에 대한 ajax 페이징 쿼리에 대한 자세한 설명

fileinput을 사용하여 비동기 ajax 업로드를 구현하는 방법

위 내용은 Ajax 3단계 연계 그래픽 및 텍스트(코드 포함)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!