Selamat Pagi, s-widodo.com akan berbagi tutorial memanggil/load halaman menggunakan ajax tanpa Reload, pembuatan halaman dengan memanfaatkan sebuah ajax untuk memanggil page halamn lainya ini diperluan beberapa componen seperti jquery, ajax dll, dan pembuatanya ini cukup simple sebelumnya silahkan anda mendesain sebuah tampilan dengan 3 menu yaitu beranda, pofil dan produk menu ini nantinyta kita akan jadikan sebuah id di dalam script ajax...

Untuk itu kita pelajarin bersama-sama untuk contoh yang saya buat ini saya menggunakan format PHP..

1. Buatlah folder tutorial didalam localhost

2. Silahkan buat tampilan index dengan 3 menu beranda, profil dan produk, html harus sama seperti dibawah ini

HTML

<li class="beranda"><a>Beranda</a></li>
<li class="profil"><a>Profil</a></li>
<li class="produk"><a>Produk</a></li>

 

Penting : contoh : <li class="beranda"> kode ini wajib untuk pemanggilan id ajax

3. Buatlah 3 halaman dengan nama beranda, profil dan produk dan beri text atau sebuah gambar untuk mengetahui terjadinya eror atau tidak jalan

4. Kembali ke halaman 1 atau index silahkan masukkan kode dibwah ini

<div class="container"></div>

5. Silahkan buat halam anbaru dengan format JavaScript dan simpan script dibwah ini

 

JavaScript

$(document).ready(function()
{
window.onload = Loadberanda();
$(" li.beranda").click(function(){Loadberanda();});
$(" li.profil").click(function(){Loadprofil(); });
$(" li.produk").click(function(){Loadproduk();});
});

function loading(){
$(".container").html('<center><img src="img/loading.gif"/><i> loading page ...</i></center>');
$(".container").hide();
$(".container").fadeIn("slow");
};
function Loadberanda(){loading();$(".container").load('beranda.php');};
function Loadprofil(){loading();$(".container").load('profil.php');};
function Loadproduk(){loading();$(".container").load('produk.php');};

 

Simpan dengan nama ajax dan panggil dalam page index

6. Silahkan downoad jquery-1.7.1.min, dan panggil dalam halaman index

7. Selesai

 

Silahkan akses di browser kalian dengan mengetik localhost/tutorial jika berhasil maka page/halam an beranda akan tampil

Jika anda menggunakan page HTML silahkan ganti script ajaxnya dengan format HTML

 

Bagi kalian yang masih binggung anda bisa mendownload dibwah ini

DOWNLOAD