Metode jQuery Ajax untuk Menampilkan JSON Data

JSON (JavaScript Object Notation) itu seperti XML, karena keduanya mempunyai hirarki, mudah dibaca dan dapat di parsing menggunakan bahasa pemrograman. Walaupun demikian, JSON lebih cepat dan lebih ringan dibanding dengan XML. Berikut ini kita akan mencoba men-generate data JSON menggunakan PHP dan menampilkan nilainya menggunakan metode jQuery Ajax.

Metode 1 (menggunakan getJSON)

Metode ini me-load JSON encoded dari server menggunakan GET HTTP request. Berikut sample script untuk menampilkan nilai JSON dengan getJSON

 $.getJSON("process.php", function(response) {
 $('#result').html(response.satu);
 $('#result2').html(response.dua);
 $('#result3').html(response.tiga);
 });

Metode 2 (menggunakan jQuery Ajax)

Seperti metode diatas, tapi disini kita dapat menambahkan options sebelum mengirimkan ajax request.

 jQuery.ajax({
 url: "process.php",
 dataType:'json',
 success:function(response)
 {
 $('#result').html(response.satu );
 $('#result2').html(response.dua );
 $('#result3').html(response.tiga );
 }
 });

Script Lengkapnya

File process.php

<?php  //List of strings in array
$myarry= array("teks 1","teks 2","teks 3","teks 4","teks 5","teks 6","teks 7");

//randomize strings
$randomize1 = array_rand($myarry);
$randomize2 = array_rand($myarry);
$randomize3 = array_rand($myarry);

//prepare output array
$myvals = array('satu'=>'1.'.$myarry[$randomize1],'dua'=>'2.'.$myarry[$randomize2],'tiga'=>'3.'.$myarry[$randomize3]);

//encode array with PHP json_encode and print output
echo json_encode($myvals);
?>

File index.html

<!DOCTYPE html>
    <html>
       <head>
         <title>Jquery : Ajax display JSON data</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
         <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
         <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>

		<script type="text/javascript">
		$(document).ready(function() {

			$("#method1").click(function() {
			MethodOne();
			});

			$("#method2").click(function() {
			MethodTwo();
			});
		});

		//Method 1
		function MethodTwo()
		{
			jQuery.ajax({
			url: "process.php",
			dataType:'json',
			success:function(response)
			{
				$('#result').html(response.satu );
				$('#result2').html(response.dua );
				$('#result3').html(response.tiga);
			}
			});
		}

		//Method 2
		function MethodOne()
		{
		$.getJSON("process.php", function(response) {
				$('#result').html(response.satu);
				$('#result2').html(response.dua);
				$('#result3').html(response.tiga);
			});
		}
		</script>
		</head>
       <body>
         <div data-role="page">
           <div data-role="header" data-position="fixed">
              <h1>My Header</h1>
		   </div>
           <div data-role="content">

			<input id="method1" type="button" value="Json Method 1" />
			<input id="method2" type="button" value="Json Method 2" />
			<div id="result"></div>
			<div id="result2"></div>
			<div id="result3"></div>
			</div>
           <div data-role="footer" data-position="fixed">
              <h1>My Footer</h1>
           </div>
        </div>
       </body>
    </html>

Blog