Advertisement
cdsatrian

Latihan AJaX

Feb 9th, 2017
194
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.23 KB | None | 0 0
  1. //--- FILE : latihan.php
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <title>Latihan AJaX</title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.             Kota
  10.             <select id='kota' name='kota'>
  11.                 <option value=''>--pilih kota --</option>
  12.                 <?php
  13.                 $kota=array('1'=>'Jakarta','Bandung','Semarang','Yogyakarta','Surabaya','Denpasar');
  14.                 foreach($kota as $val=>$text) echo "<option value='{$val}'>{$text}</option>";
  15.                 ?>
  16.             </select><br>
  17.             provinsi <input type='text' id='provinsi' name='provinsi'><br>
  18.             jumlah penduduk <input type='text' id='jml_penduduk' name='jml_penduduk'><br>
  19.             <input type='submit' value='kirim'>
  20.         </form>
  21.     </body>
  22.     <script
  23.         src="https://code.jquery.com/jquery-1.12.4.min.js"
  24.         integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  25.         crossorigin="anonymous">
  26.     </script>
  27.     <script>
  28.     $(document).ready(function(){
  29.         $('#kota').change(function(){   //-- jalankan perintah berikut jika combobox dengan id='kota' berubah nilainya (onChange)
  30.             $.post(                     //-- lakukan proses AJaX dengan HTTP method POST
  31.                 'latihan_ajax.php',     //-- panggil file 'latihan_ajax.php'
  32.                 {'kota':$(this).val()}, //-- kirimkan paramater bernama 'kota' dengan nilai sesuai nilai combobox yg dipilih
  33.                 function(data){         //-- jalankan fungsi berikut jika proses AJaX sukses
  34.                     var hasil=$.parseJSON(data);    //-- parsing data JSON dari respon server dan masukkan ke variable 'hasil'
  35.                     $('#provinsi').val(hasil.provinsi);     //-- ubah nilai inputan dengan id='provinsi' dengan nilai hasil.provinsi
  36.                     $('#jml_penduduk').val(hasil.jml_penduduk); //-- ubah nilai inputan ber id='jml_penduduk' dgn data yg sesuai
  37.                 }
  38.             );
  39.         });
  40.     });
  41.     </script>
  42. </html>
  43.  
  44. //-- FILE : latihan_ajax.php
  45. <?php
  46. if(isset($_POST['kota'])){
  47.     $data=array(
  48.         '1'=>array('provinsi'=>'DKI Jakarta','jml_penduduk'=>'7 jt'),
  49.         '2'=>array('provinsi'=>'Jawa Barat','jml_penduduk'=>'27 jt'),
  50.         '3'=>array('provinsi'=>'Jawa Tengah','jml_penduduk'=>'25 jt'),
  51.         '4'=>array('provinsi'=>'DI Yogyakarta','jml_penduduk'=>'9 jt'),
  52.         '5'=>array('provinsi'=>'Jawa Timur','jml_penduduk'=>'26 jt'),
  53.         '6'=>array('provinsi'=>'Bali','jml_penduduk'=>'8 jt'),
  54.     );
  55.     $hasil=isset($data[$_POST['kota']])?$data[$_POST['kota']]:array('provinsi'=>'-','jml_penduduk'=>'-');
  56.     echo json_encode($hasil);
  57. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement