Metode jQuery Ajax untuk Menampilkan JSON Data

Written by Edusoft Center on March 31, 2014. Posted in Blog

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>

Tutorial Lain

Tags: , , , , , , , , , , , , , , , , ,

Trackback from your site.

Share This Post To :

Edusoft Center

Edusoft Center merupakan lembaga yang fokus pada bidang IT terutama pada Kursus Komputer Profesional. Berlokasi di Solo / Surakarta dan dengan slogan “Start Here. Go Anywhere” diharapkan ilmu yang didapat pada kursus kami dapat diterapkan untuk mempermudah dan menunjang pada semua lini kegiatan yang dilakukan. "Selamat datang di Edusoft Center, Kursus Komputer di Solo"

Leave a comment

Jika anda membutuhkan info lebih lanjut atau ingin mengetahui jadwal kursus, silakan hubungi kami,

Call / SMS :

0896 987 12224


Call / SMS / WA :

08180 4542 586


Email:
[email protected]