Penggunaan ajax dan json pada method post - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Penggunaan ajax dan json pada method post, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel ajax, Artikel php, Artikel Source Code, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Penggunaan ajax dan json pada method post
link : Penggunaan ajax dan json pada method post

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

Demikianlah Artikel Penggunaan ajax dan json pada method post

Sekianlah artikel Penggunaan ajax dan json pada method post kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Penggunaan ajax dan json pada method post dengan alamat link https://tipstopmarketing.blogspot.com/2014/10/penggunaan-ajax-dan-json-pada-method.html

Tweet