Cara Mengambil Data Menggunakan jQuery AJAX

AJAX (Asynchronous JavaScript and XML) itu ialah tehnik yg memanfaatkan XMLHttpRequest bagi berkomunikasi dengan server-side script. Ajax ini dapat menerima dan mengirim data/informasi pada format JSON, XML, HTML, dan TEXT. Keuntungannya ialah Ajax ini dapat mengirim dan menerima data/informasi tanpa perlu me-refresh halaman web sedangkan JQUERY ialah Javascript Library yg dapat dimanfaatkan tuk merancang applikasi web dengan cepat yg mana Ajax ialah diantara library pada jquery. Di tips dan trick kali ini saya akan memberi Cara Mengambil Data Menggunakan jQuery AJAX

Di kasus ini saya akan mencoba menampilkan data dari database dengan menggunakan jQuery AJAX. Ok, seketika saja saya akan memebrikan strategi Cara Mengambil Data Menggunakan jQuery AJAX:

1. Pertama-tama

Unduh file jQuerynya terlebih dahulu lalu simpan dengan nama jquery.js dan simpan pada folder project teman-teman. Saya indikasikan teman-teman telah dapat merancang database sendiri jadi teman-teman tinggal merancang tabel paket yang di dalmnya terdapat id dan pun nama_paket.

2. Kedua

Teman-teman ketikan kode html di bawah ini:

<!DOCTYPE html><br />
<html><br />
<head><br />
	<title>Test</title><br />
</head><br />
<body></p>
<p><!–id show ialah kolom tempat data akan di tampilkan–><br />
<div id=”show”></div></p>
<p></body><br />
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!—id show ialah kolom tempat data akan di tampilkan—>

</body>

</html>

3. Ketiga

Bagi menampilkan data kita mesti merancang koneksinya dan querynya, karenanya teman-teman bikin file baru dengan nama data.php

<?php<br />
//koneksi<br />
$conn = new mysqli(‘localhost’,’dumet’,’school’,’test’);<br />
if($conn->connect_error){<br />
	die(“Connection error”. $conn->connect_error);<br />
}</p>
<p>//tampil data dari database<br />
$result = $conn->query(“SELECT nama_paket FROM paket”);<br />
if ($result->num_rows > 0){<br />
	while($row = $result->fetch_assoc()){<br />
		echo $row[“nama_paket”].”<br>”;<br />
	}<br />
}<br />
?>

<?php

//koneksi

$conn = new mysqli(‘localhost’,‘dumet’,‘school’,‘test’);

if($conn–>connect_error){

die(“Connection error”. $conn–>connect_error);

}

//tampil data dari database

$result = $conn–>query(“SELECT nama_paket FROM paket”);

if ($result–>num_rows > 0){

while($row = $result–>fetch_assoc()){

echo $row[“nama_paket”].“<br>”;

}

4. Keempat

Kita sisipkan file jquery.js yang telah kita unduh dan bikin script bagi memasukan salah sata cara AJAX sehingga data dapat di tampilkan

<script type=”text/javascript” src=”jquery.js”></script><br />
<script type=”text/javascript”><br />
	$(document).ready(function(){<br />
		//setInterval memberikan delay di ketika data akan di tampilkan<br />
		setInterval(function(){<br />
                //Sistem load digunakan bagi menampilkan data<br />
			$(‘#show’).load(“data.php”)<br />
		}, 1000);<br />
	});<br />
</script>

$(document).ready(function(){

//setInterval memberikan delay di ketika data akan di tampilkan

setInterval(function(){

//Sistem load digunakan bagi menampilkan data

$(‘#show’).load(“data.php”)

}, 1000);

});

</script>

teman-teman buka file index.php-nya localhost masing-masing karenanya tampilannya akan menjadi seperti ini:

Apabila teman-teman memasukan data lagi ke pada tabel paket karenanya secara otomatis akan tampil di halaman index.php yag telah kita bikin tadi.

Bagaimana teman-teman lumayan mudahkan mengambil data menggunakan jquery AJAX. Dengan AJAX kita tak perlu mereload lagi page bagi menampilkan data baru.

Demikianlah tips dan trick kali ini mengenai Cara Mengambil Data Menggunakan jQuery AJAX. Semoga bermanfaat.

sumber :kursuswebprogramming.com/blog/

(Visited 60 times, 1 visits today)

Leave a Reply Cancel reply