Kursus Membuat Web

iklan

Contoh JSON

Contoh JSON

Ini contoh membaca data JSON dari server web yang menggunakan PHP dan MySQL :

Contoh JSON
<!doctype html>
<html lang="id">
  <head>
	<title>Contoh JSON</title>
	<meta  charset="UTF-8">
	<style>
		  h1 {
		  border-bottom: 3px solid #cc9900;
		  color: #996600;
		  font-size: 30px;
		  }
		  table, th , td {
		  border: 1px solid grey;
		  border-collapse: collapse;
		  padding: 5px;
		  }
		  table tr:nth-child(odd) {
		  background-color: #f1f1f1;
		  }
		  table tr:nth-child(even) {
		  background-color: #ffffff;
		  }
	</style>
  </head>
  <body>
	<h1>City</h1>
	<div id="id01"></div>
		<script>
		  var xmlhttp = new XMLHttpRequest();
		  var url = "city_mysql.php";
		  xmlhttp.onreadystatechange=function() {
		  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		  myFunction(xmlhttp.responseText);
		  }
		  }
		  xmlhttp.open("GET", url, true);
		  xmlhttp.send();
		  function myFunction(response) {
		  var arr = JSON.parse(response);
		  var i;
		  var out = "<table>";
		  for(i = 0; i < arr.length; i++) {
		  out += "<tr><td>" +
		  arr[i].Name +
		  "</td><td>" +
		  arr[i].District +
		  "</td></tr>";
		  }
		  out += "</table>"
		  document.getElementById("id01").innerHTML = out;
		  }
		</script>
    </body>
</html>

Lihat ...

Kode PHP pada Server

Ini adalah kode PHP yang berjalan di server :

<?php
  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json; charset=UTF-8");
	$conn = new mysqli("localhost", "root", "", "world");
	$result = $conn->query("SELECT Name, District FROM city limit 10");
	$outp = "[";
  
		while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
			if ($outp != "[") {$outp .= ",";}
				$outp .= '{"Name":"'  . $rs["Name"] . '",';
				$outp .= '"District":"'   . $rs["District"]   . '"}';
			}
		$outp .="]";
	$conn->close();
	echo($outp);
?>
Sebelumnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015