良く使うAjaxメモ

今回は久々にスクリプトのお話です。

個人的に、僕はAjaxが嫌い、というかJavaScriptが嫌いです。理由は当然、ブラウザによって挙動が違うからです。こう思う人、結構いますよね。

リリース後の誤動作や検証コストを考えても、開発現場では、JavaScriptを使わなくても実現できるならば使わないべきと僕は考えています。

簡単なものであれば良いんですが、複雑になればなるほど問題が起こった場合に苦しみます・・・

こんな僕なんで、たまにJavaScript、というかjQueryでAjaxになるんですが、プルダウンを変更すると別のプルダウンの中身をサーバに取りに行って変更するという、良く使うヤツのメモです。

1.まず親プルダウンと子プルダウン

<select name="oya_code">
<option></option>
</select>

<select name="ko_code">
<option></option>
</select>

2.親プルダウンチェンジイベント

$("[name='oya_code']").change(function(){

  //サーバに子セレクトの内容を取りに行って入れ替える
  getKoData($(this).val());
});

3.getKoDataの定義

function getKoData(oya_code){

  //まず、子プルのデータを空にしちゃう
  $("[name='ko']").empty();

  //子データを返すプログラムを別に作るのが面倒な場合は
  //このスクリプトが実行されるPHPファイルにしてしまう
  //(後ほど説明します)
  $.getJSON("<?= $_SERVER[SCRIPT_NAME] ?>", {
  get_ko: 1,
  oya_code: oya_code
  },
  function(data, status){

    $("[name='ko_code']").append("<option value=''>-------</option>");
    $.each(data, function(i, obj){
      $("[name='ko_code']").append("<option value='" + obj.ko_code + "'>" + obj.ko_name + "</option>");
    });
  });
}

4.子データをJSON形式返すプログラム(これはPHPの関数です)

function putKoData($oya_code){

  //親コード($oya_code)をキーに、子コードと子の名前をキーと値に持つ二次元配列とします
  //$oyako_list

  //仮の配列
  $tmp = array();

  foreach($oyako_list as $key => $ko_list){

    if($key == $oya_code){

      foreach($ko_list as $ko_code => $ko_name){

        $data = "{";
        $data.= '"ko_code":"' . $ko_code . '",';
        $data.= '"ko_name":"' . mb_convert_encoding($ko_name, "utf-8", "auto") . '"';
        $data.= "}";

        $tmp[] = $data;
      }

      if(!empty($tmp)){
        header("Content-type: text/html; charset=utf-8");
        print "[" . join(",", $tmp) . "]";
      }

      break;
    }
  }
}

5.「3」と「4」についての補足

通常、このプルダウンが表示されるメインのファイルを「a.php」とすると、
getJSONでデータを取りにいくファイル「b.php」があると思います。

「4」のphpの関数は「b.php」で実行されると思いますが、
これだけのためにファイルを別に作るのもなんなんで、「a.php」だけで
実現しちゃってます。

具体的には、getJSONでパラメーター「get_ko = 1」を投げることで
「a.php」内に、下記条件によってJSONデータを返す処理だけを行う記述をします。

※$_GETの展開は省いています。

if($get_ko == 1){
  putKoData($oya_code);
  exit;
}

「a.php」で、メインとJSON出力の処理を行うという1ファイル2役ってことですね。

というわけで、簡単な処理なんですが、いざやろうとするとちょっと考えてしまうAjaxメモでした。