menghapus data dengan ajax menggunakan event onclick

Hallo blogger kali ini saya akan menjelaskan tentang menghapus data dengan ajax menggunakan event onclick dan juga menggunakan ajax. Dengan menggunakan ajax memungkinkan user untuk melakukan aksi tanpa perlu reload halaman. seperti kita ketahui html /php dirender ketika halaman di refresh lalu web browser mengartikan kode html / php baru ditampilkan di web browser sesuai dengan kode yang ada. Nah dengan menggunakan ajax kita tidak perlu melakukan refresh halaman untuk melakukan aksi

simplenya seperti ini

HTML / PHP

user --> request --> server --> refresh halaman --> html / php dikirim dari server --> web browser mengartikan kode --> halaman ditampilkan

AJAX

user --> request --> ajax --> server --> html / php dikirim dari server --> web browser mengartikan kode --> halaman ditampilkan

perbedaan kedua cara diatas adalah pada refresh halaman. nah cukup jelas kan ??

baca juga pengecekan secara berkala menggunakan ajax dan jQuery interval


lansung saja saya akan menjelaskan tentang bagaimana cara membuat event onclick hapus data dengan ajax.

1. pada button hapus beri kode event onclick='hapus(id)'

<button type='button' class='btn btn-success' id='hapus' onclick='hapus(".$row['id'].")' >

2. kemudian pada file yang sama buat fungsi java script hapus()

<script>
function hapus(id) {
$.ajax({
      type: 'POST',
      data: 'id='+id,
      url: 'hapus.php',
      success: function(result) {
        var response = JSON.parse(result);
        if(response.status){    
          alert('berhasil');
        }else{                
          alert('gagal');
        }
      }
    });
}
</script>
3. buat file hapus.php

<?php
include('database.php');  
$id=$_POST['id'];
$hapus = mysql_query("delete from namatable where id=".$id." ");
if($hapus){
    echo json_encode(array('status'=>true,'msg'=>$table));
}else{
   echo json_encode(array('status'=>false,'msg'=>$table));
}
?> 

Baca juga merotasi memutar gambar dengan jquery 

NB : warna merah diubah menjadi nama tabel dan warna orange digunakan untuk deklarasi database

4. silahkan coba jalankan file anda :)

Mungkin cukup sekian tutorial saya kali ini tentang menghapus data dengan ajax menggunakan event onclick apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)

Share this

Related Posts

Previous
Next Post »

3 komentar

komentar
25 Mei 2017 14.15 delete

terimakasih, artikel yang sangat bermanfaat

Reply
avatar
25 Mei 2017 14.52 delete

Maaf mas saya masih newbie, setelah eksekusi kode diatas berhasil, gimana caranya mengembalikan nya ke tabel / refresh ke tabelnya saja tanpa keseluruhan page??terimakasih

Reply
avatar
28 Juli 2017 15.04 delete

gan,kalo pke framework,apakah penempatan syntaxnya dmna,.? apakah perlu membuat file baru dengan nama hapus.? makasih yah gan,.

Reply
avatar