Penggunaan ajax dan json pada method post

Anda sudah tahu dengan ajax ? kalau tidak tahu, silahkan cari dulu tentang ajax di Google :D

Biasa membuat form input mesti pake kode ginian :

<form action='tujuan.php' method='post'>

Alhasil ketika mengklik button/submit maka halaman tersebut direfresh/reload secara otomatis. Nah, bagaimana jika kita mem-post sebuah inputan tanpa refresh halaman? tentu menggunakan ajax.
Pertama sekali yang diperlukan adalah jquery. Anda bisa menyisipkan jquery atau mendownloadnya untuk penggunaan local webserver. contohnya seperti ini menyisipkan jquery tanpa mendownloadnya.

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>

Tapi anda bisa juga mendownloadnya untuk penggunaan local webserver pada 1 folder aplikasi dengan menyisipkan kode seperti ini :

<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>

Kembali ke topik, bagaimana mem-post sebuah form tanpa refresh halaman.

Buat sebuah file, misal index.php tulis kode seperti ini :

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

//atau
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>

<script>
$(document).ready(function() {
   $("#submit").click(function(){
    $.ajax({
type: "POST",
dataType:'json',
url: "tespost.php",
data: $('form').serialize(),
error: function (xhr, ajaxOptions, thrownError) {
$('#response').html(xhr);   },
cache: false,
beforeSend: function() {
$('#response').html("<img src='ajax-loader.gif' />");
},
success: function(result){
$('#response').html(result.pesan);
}
});
    return false;
   }); });
</script>
<form>
Nama <input id="nama" name="nama"/><br>
Telepon <input id="telepon" name="telepon"/><br>
<input type="button" id="submit" value="Kirim"/>
</form>
<div id="response"></div>

Di sini diterangkan bahwa setiap mengklik button Kirim (submit) maka sinkronkan proses ke tespost.php . Dengan mengirimkan data input pada form tersebut

                $("#submit").click(function(){
    $.ajax({
type: "POST",
dataType:'json',
url: "tespost.php",
data: $('form').serialize(),

$('#submit') berarti membaca attribute html yaitu id="submit"
Sebelum dikirimkan, maka akan ditampilkan sebuah gambar loading pada div id="response" (silahkan download gambarnya)

beforeSend: function() {
$('#response').html("<img src='ajax-loader.gif' />");
 },

Berikut kode tespost.php :

<?php
if(isset($_POST['nama']) && isset($_POST['telepon']))
{
$nama=$_POST['nama'];
$telepon=$_POST['telepon'];
echo json_encode(array(
'status'=>'yes',
'pesan'=>'Nama '.$nama.' Telepon '.$telepon,
));
}else{
echo json_encode(array(
'status'=>'no',
'pesan'=>'Tidak ada data',
));
}
?>

Setelah sukses dikirim dan berhasil, maka akan menghasilkan output JSON yaitu:

echo json_encode(array(
'status'=>'yes',
'pesan'=>'Nama '.$nama.' Telepon '.$telepon,
));

dengan menggunakan JSON, anda dapat mendapatkan sebuah variable output yang nantinya akan diproses pada ajax success. Membuat function dengan parameter result sebagai input yang membawa output dari json tespost.php tersebut. Disini result akan menampilkan variable pesan

success: function(result){
$('#response').html(result.pesan);
}

Ok, mudah bukan? silahkan berimprovisasi

Tweet