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