Tutorial AJAX Part 3 : Respon AJAX Dengan Format JSON
PENGERTIAN JSON
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation, adalah suatu format ringkas pertukaran data komputer.
RESPON AJAX DENGAN FORMAT JSON
Format JSON sangat cocok digunakan untuk menampilkan data dari database melalu AJAX. Cara menggunakan format JSON cukup mudah, hanya dengan menambah option dataType: "JSON".
Untuk contohnya, kita siapkan dulu database misalnya kita beri nama DML. pada database tersebut terdapat tabel siswa yang memiliki kolom nis dan nama. Selanjutnya kita buat file dengan nama siswa.phpdan isi skri sebagai berikut :
siswa.php
<!DOCTYPE html>
<html>
<head>
<title>BAB 2.4 | Respon AJAX dengan Format JSON</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.ajax({
url: 'json.php',
type: 'GET',
dataType: 'JSON',
success: function(data){
for (var i = 0; i < data.length;i++) {
$('tbody').append('<tr><td>'+data[i].nis+'</td><td>'+data[i].nama+'</td></tr>');
}
},
error: function(data){
alert("Tidak dapat memproses");
}
});
});
</script>
</head>
<body>
<form id="myForm">
<table border="1" cellspacing="0" width="100%">
<thead>
<tr>
<th>NIS</th>
<th>Nama</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
</table>
</body>
</html>Pada skrip di atas, kita akan tampilkan data dari database di dalam tag <tbody> menggunakan fungsi append(). Karena pada database terdiri dari banyak data maka ketika dijadikan format JSON akan menjadi array. Sehingga untk mengakses setiap data, kita menggunakan perulangan for. Adapun setiap datanya akan menjadi objek (data[i]) diikuti dengan nama kolom pada database yang dipisahkan dengan titik.
Untuk mengambil data siswa dari database, kita buat file json.php dengan skrip sebagai berikut :
json.php
<?php
$mysqli = mysqli_connect("localhost", "root", "password", "DML");
$siswa = array();
$query = mysqli_query($mysqli, "SELECT * FROM siswa");
while ($data = mysqli_fetch_array($query)) {
$siswa[]=$data;
}
echo json_encode($siswa);
?>Hasilnya sebagai berikut
KESIMPULAN
Untuk melakukan pertukaran data dengan JSON cukup kita menambah dataType: "JSON" dan memberikan beberapa skrip agar data yang dimaksud daat tampil. Yaitu dengan menggunakan perulangan agar data bisa tampil karena JSON merubah data yang ditangkap menjadi Array. Sekian Terima Kasih
Tidak ada komentar :
Posting Komentar