Cara Membuat Submit No Reload Dengan AJAX

1. Pertama-tama , kita membutuhkan modul AJAX. Bagi yang belum punya, bisa di download di sini
2. Taruh di folder yang sama dengan form
3. Kita buat formnya :D , misalnya formnya seperti ini. Juga dengan JavaScriptnya. Di save dengan format PHP, namanya terserah

<script type="text/javascript" src="1.5.2.main.js"></script>//<--- memanggil modul AJAX

<script type="text/javascript">

function proses(){

$("#proses").html('Loading...');

$.post('proses.php', $("form").serialize(), function(hasil){

$("#proses").html(hasil);

});

}

</script>

//$("#loading").html('Loading...'); = Saat proses POST akan terjadi apa/ memunculkan apa

//$.post('proses.php', $("form").serialize(), function(hasil){ = POST ke proses.php, dan mengubah hasil POST ke variable hasil

//$("#loading").html(hasil); = perintah memunculkan hasil dari POST form ke tempat loading

<h2>Dragon City Exp</h2><br>

<form method="post" action="">

Nama : <input type="text" id="nama" name="nama"><br>//<--- Kotak nama

Alamat : <input type="text" id="alamat" name="alamat">//<---Kotak alamat

<input type="submit" value="Submit" onClick="proses(); return false;">//<---Submit Button. onClick="()proses" akan di load di Java Script di atas

<div id="loading"></div>//<--- tempat meload hasil loading

      

     4. Buat proses.php

<?PHP

$nama=$namaa

$alamat=$alamattt

echo "Nama : $namaaa";

echo "Alamat : $alamattt";

?>

    5. Siap di pakai :D

Share :

Tweet

✚

Related Post