Php Ajax Json ile İl-İlçe-Mahalle Örneği

Php Ajax Json ile İl-İlçe-Mahalle Örneği

Bu örneğimizde internette en çok aranan bir örneği biraz daha güzelleştirip size sunuyorum

Diğer örneklerde sadece birbiri ile ilişkli combox verilirken bu örnekte aşağıda sayacağım extra özellikleri de bulabilirsiniz.

1-Bootstrap

2-Bootstrap Toggle (Açılıp Kapanan Form kutusu)

3-Select özelliği (Comobox lara arama özelliği eklenmsi)

4-Bootbox (java script ile Bootstrap Modal ile mesaj)

Ayrıca bu örnekte başlangıçta tüm kutular ve Gönder butonu Disabled yapılıp kutular ddoldukça açılmaları ve en son combobox dolduktan sonra butonun aktif olması sağlanmıştır.

  1. Bölüm 
<html lang="en" class="h-100">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Php Ajax</title>
    <!-- Bootstrap Css -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Bootstrap Toggle Css -->
    <link rel="stylesheet" href="bootstrap/bootstrap4-toggle/css/bootstrap4-toggle.min.css" >
    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <!-- Jquery Js -->
    <script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
    <!-- Bootstrap Js -->
    <script src="bootstrap/js/bootstrap.min2.js"></script>
    <!-- Bootstrap Toogle Js -->
    <script src="bootstrap/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
    <!--select Js -->
    <link rel="stylesheet" href="css/select2.min.css">
    <!--select Js -->
    <script type="text/javascript" charset="utf8" src="js/select2.min.js"></script>
    <!--bootbox Js -->
    <script type="text/javascript" charset="utf8" src="js/bootbox.min.js"></script>
  </head>
<body>

<main role="main" class="container pl-0 pr-0 pt-4">
  <div class="container-fluid  pl-1 pr-1">
    <div class="card  rounded" style="border-color:#563D7C;">
      <div class="card-header" >
        <h6>
          Adres Seçimi
          <a class="btn btn-xs float-right" data-toggle="collapse" href="#collapse-example" >
            <i class="fa fa-chevron-down pull-right"></i>
          </a>
        </h6>  
      </div>
      <div id="collapse-example" class="collapse show">
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
              <label class="font-weight-bold">İl</label>
              <select  name="il" id="select_il" class="form-control" >                     
              </select> 
            </div>
            <div class="col-md-3">
              <label class="font-weight-bold">İlçe</label>
              <select name="ilce" id="select_ilce" class="form-control">
              </select> 
            </div>
            <div class="col-md-3">
              <label class="font-weight-bold">Mahalle</label>
              <select  name="mahalle" id="select_mahalle" class="form-control">                    
              </select> 
            </div> 
            <div class="col-md-3 pt-4">
              <button id="btn_button" class="btn btn-primary" type="submit">Button</button>       
            </div> 
          </div>  
        </div>  
      </div> 
    </div>
   </div>                       
</main>   

<script>
$(document).ready(function() 
{

  $("#select_il").change(function()
  {
    var il = $("#select_il").val();
    console.log (il)
    ajaxFunc("ilce_doldur",il,"","#select_ilce");
  });

  $("#select_ilce").change(function()
  {
    var il = $("#select_il").val();
    var ilce = $("#select_ilce").val();
    console.log (ilce)
    ajaxFunc("mahalle_doldur",il,ilce,"#select_mahalle");
  });

  $("#select_mahalle").change(function()
  {
    $("#btn_button").removeAttr('disabled'); 
  });

  function ajaxFunc(islem,il,ilce,id)
  {
    try {
        var parData = {islem:islem,il:il,ilce:ilce};
        
        $.ajax({
          url: "deneme3.php",
          type: "GET",
          data: parData,
          beforeSend: function() 
          { 
            $(id).attr('disabled', 'disabled');
          },
          complete: function() 
          {
            $(id).removeAttr('disabled'); 
          },
          success: function(sonuc)
          {
            console.log(id);
            console.log(sonuc);
            if(sonuc!='')
            {
              $.each($.parseJSON(sonuc), function(index, value){
                var row ="<option value='"+value.id+"'>"+value.deger+"</option>";
                $(id).append(row);
              });
            }
            else
            {
              console.log(sirket + " - " + islem  +" için veriler boş");
            }
          }
        });
    } 
    catch (error) {
      console.log(error);
    }
  };



  function FormLoad()
  {
    $("#select_il").attr("disabled", false).html("<option value=''>Seçiniz</option>");
    $("#select_il").attr('disabled', 'disabled');
    $("#select_ilce").attr("disabled", false).html("<option value=''>Seçiniz</option>");
    $("#select_ilce").attr('disabled', 'disabled');
    $("#select_mahalle").attr("disabled", false).html("<option value=''>Seçiniz</option>");
    $("#select_mahalle").attr('disabled', 'disabled');
    $("#btn_button").attr('disabled', 'disabled');
    ajaxFunc("il_doldur","","","#select_il");
  }

  FormLoad();
  $("select").select2();
  bootbox.alert({
                  message: "Lütfen uygun alanları seçiniz.",
                  size: 'small',
                  centerVertical :true
              });
  });
  
</script>

</body>
</html>

Bu bölümde kullaıan scriptler, form ve fonksiyonlarımız ve Ajax yapımız bulunmaktadır.

2.Bölüm

<?php

$baglanti = new PDO("sqlsrv:Server=xx;Database=yy","ww", "qq");

if(isset($_GET["islem"]))
{
$islem = $_GET["islem"];
}

if(isset($_GET["il"]))
{
$il = $_GET["il"];
}

if(isset($_GET["ilce"]))
{
$ilce = $_GET["ilce"];
}

if($islem =="il_doldur")
{
    $data=array();
    $query = $baglanti->query("SELECT * FROM il", PDO::FETCH_ASSOC);

    if($query->rowCount())
    {
        foreach ($query as $row)
        {
            $data[]=array("id" => $row["plaka"],"deger" => $row["il"]);
        }
    }
    echo json_encode($data);
}

if($islem =="ilce_doldur")
{
    $data=array();
    $query = $baglanti->query("SELECT * FROM ilce where plaka='$il'", PDO::FETCH_ASSOC);

    if($query->rowCount())
    {
        foreach ($query as $row)
        {
            $data[]=array("id" => $row["id"],"deger" => $row["ilce"]);
        }
    }
    echo json_encode($data);
}


if($islem =="mahalle_doldur")
{
    $data=array();
    $query = $baglanti->query("SELECT * FROM mahalle where ilce_id=$ilce", PDO::FETCH_ASSOC);

    if($query->rowCount())
    {
        foreach ($query as $row)
        {
            $data[]=array("id" => $row["id"],"deger" => $row["mahalle"]);
        }
    }
    echo json_encode($data);
}
?>

Bu bölümde gelen veri alınarak sorgulanıp JSON formatında geri dönüşü yapılmaktadır.

Her türlü soru ve önerinizi yorum kısmında iletebilirsiniz.

Faydası olması dileklerimle

 

 

 

İlk Yorumu Sen Yap

Benzer Yazılar