BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. AJAX関連

AJAXは、省、市、郡レベルの連携効果を実現するために

2022-01-15 08:50:38

最近AJAXの学習でこの県、市、郡3つのリンクされたケースを行うには、ここだけの話ですが、サーバー側のdata.phpファイルのいくつかの知識は説明しませんAJAXの要求についてです。
(ヒント 実はjQueryプラグインを導入するだけで、県・市・郡の3階層をリンクさせることができるのです)

レンダリング

まずサーバー側のファイルを2つ用意します。もう1つは長すぎるのでここではインポートできません

selsect.php 

<?php 
    /*
    Provincial, city and county backend data interfaces
 Interface call rules.
 1. Parameter one: flag, used to distinguish the request is the kind of data in the middle of the province, city and county
 2. parameter two: pass pid when selecting a province, pass cId when selecting a city
 http://localhost/select.php?flag=1#pId=23
    */
    // include('. /selectdata.php');
    require('. /selectdata.php');
    // Province, city and county data from selectdata.php file
    $province = $provinceJson;
    $city = $cityJson;
    $county = $countyJson;

    $flag = $_GET['flag'];
    // Provincial data
    if($flag == 1){
        echo json_encode($province);
    // city-level data
    }else if($flag == 2){
        $pId = $_GET['pId'];
        $cityData = array();
        foreach ($city as $value) {
            if($value->id == $pId){
                // city
                array_push($cityData,$value);
                break;
            }else if($value->parent == $pId){
                // non-municipality
                array_push($cityData,$value);
            }
        }
        echo json_encode($cityData);
    // county data
    }else if($flag == 3){
        $cId = $_GET['cId'];
        $countyData = array();
        foreach ($county as $value) {
            if($value->parent == $cId){
                array_push($countyData,$value);
            }
        }
        echo json_encode($countyData);
    }
? >

select.html

ここでは 基礎となるajax を使用するか、あるいはショートカットメソッドの $.get メソッドを使用しています。リクエストされたサーバーサイドのファイルは現在のファイルと同じなので は、現在のファイルと同じオリジンである を実行する必要はありません。 クロスドメイン のリクエストに対応します。 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function($){
    function queryData(obj,callback){
     // $.ajax({
     // type:'get',
     // url:'http://localhost/AJAX/select.php',
     // data:obj,
     // dataType:'json',
     // success:function(data){
       
     // callback(data);
     // }
     // });
     $.get('http://localhost/AJAX/select.php',obj,function(data){
      callback(data);
     },'json');
    };
    queryData({
     flag:1
    },function(data){
     var option = '';
     $.each(data,function(i,e){
      option += '<option value="' + e.id + '">' + e.since + '</option>'
     });
     $('#province').append(option);
    });
    $('#province').change(function(){
     // Avoid data stacking
     $('#city').find('option:gt(0)').remove();
     queryData({
      flag:2,
      pId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.city + '</option>'
      });
      $('#city').append(option);
     });
    });
    $('#city').change(function(){
     $('#county').find('option:gt(0)').remove();
     queryData({
      flag:3,
      cId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.county + '</option>'
      });
      $('#county').append(option);
     });
    });
   });
  </script>
  <style type="text/css">
   #container{
    width: 500px;
    min-height: 300px;
    margin: auto;
    text-align: center;
    padding: 10px;
    
   }
  </style>
 </head>
 <body>
  <div id="container">
   <label>
    Province:
    <select id="province">
     <option > Please select province... </option>
    </select>
   </label>
   <label>
    City:
    <select id="city">
     <option >Please select city... </option>
    </select>
   </label>
   <label>
    County:
    <select id="county">
     <option >Please select county... </option>
    </select>
   </label>
  </div>
 </body>
</html>

ここでもう一つ注意点があります。$.ajaxメソッドを使用してリクエストする場合、$.ajaxメソッド内の 2回目のajaxリクエストが1回目のリクエストの結果に依存する場合、2回目のリクエストはコールバック関数の内部に置かなければなりません。 これは、ajaxリクエストが非同期であるためです。

これと似たようなもの 

$.ajax({
 type:'get',
 url:'citycode.php',
 data:{cityName:city},
 dataType:'json',
 // If the second ajax request depends on the result of the first request, then the second request must be placed inside the callback function
 success:function(data){
  $.ajax({
   type:'get',
   url:'cityweather.php',
   data:{cityCode:data.cityCode},
   dataType:'json',
   success:function(res){
   data = res.retData;
   var tag = '<ul><li>wind direction:'+data.WD+'</li><li>wind level:'+data.WS+'</li><li>elevation:'+data.altitude+'</li>& lt;li>date:'+data.date+'</li><li>max.temp:'+data.h_tmp+'</li><li>min.temp:'+data.l_tmp+'</li><li>avg. temp. :'+data.temp+'</li><li>Sunrise time:'+data.sunrise+'</li><li>Sunset time:'+data.sunset+'</li><li>Latitude:'+data. latitude+'</li><li>longitude:'+data.longitude+'</li></ul>'
   $('#info').html(tag);
   }
  })
 }
})

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します